Ali Cope

Lesson 12 - Designing, Defining, and Triggering CSS3 Transforms without Custom Libraries (Thought Library)

Transforms are used to change the shape and position of the content without affecting the normal document flow. There are two major properties that are used to define transforms in CSS. theyare "transform" and "transform-origin"
Transform: Identifies the transforms to apply tothe element. This list is space seperated and applied one after another in order from right to left.
Transform-origin: Identifies the position of the origin. The default is the center of the element but it can be moved. It is used by several of the transforms like rotations, scaling, or skewing.
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms

Examples

We can use transform to rotate and skew the following text. Just hover over to see the transform.

Transform in 3D

Now that we understand the basics we can do something really cool, we can transform in 3D! We need to add the "perspective" attribute to make this work. Check out the example and the code below it.