Transform

The transform CSS property is great for scaling, rotating or moving content. This is an interactive tutorial on most of the ways you can add transform in CSS.

In this example, notice how there is perspective: 40px applied to the container class. This is what allows most of the transforms to actually look 3-D.

It's important to remember that the last `transform` CSS property on an element completely overrides any other `transform` property just like normal CSS.

Rotate

Using the rotate() function, we can rotate an element. Any valid CSS <angle> value can be used here. That means deg (degrees), rad (radians), turn, or grad (gradians) units can be used for angles.

Transform

.item { transform: rotate(0deg); }

There are also different variants such as rotateX() and rotateY() which individually set the rotate along the x or y axis.

Transform

.item { transform: rotateX(0deg); }

The rotate3d() function can be used to rotate an element around an axis in 3-D space. The syntax looks like this: rotate3d(x, y, z, a). The [x, y, z] represent the coordinates of the rotation vector. a represents the rotation amount.

Transform

.item { transform: rotate3d(0.1, 0.1, 0.1, 0deg); }

Translate

Translating allows you to resposition an element. In the first example, the first value is the x position and the second value is the y position.

Transform

.item { transform: translate(0px, 0px); }

There are alternatives such as translateX and translateY as well which move the element individually along the x or y axis.

Transform

.item { transform: translateX(0px); }

Using translate3d() sets the position of the element along all 3 axis. Combined with the perspective CSS property, elements can be pushed away or towards the screen.

Transform

.item { transform: translate3d(0px, 0px, 0px); }

Skew

With the skew() function you can… skew an element.

Transform

.item { transform: skew(0deg, 0deg); }

There are also variants such as skewX() which allow you to skew in different axis.

Transform

.item { transform: skewX(0deg); }

Scale

scale() lets you shrink or expand an element. Using the scale() function with one value scales it in both the x and y axis.

Transform

.item { transform: scale(1); }

Using 2 values lets you choose the scaling individually along the x and y axis.

Transform

.item { transform: scale(1, 1); }

Like many of the other transform functions, scale() has variants such as scaleX() which target specific axis.

Transform

.item { transform: scaleX(1); }

scale3d() scales an element in a 3d worldspace. The 3 values represent the [x, y, z] axis.

Transform

.item { transform: scale3d(1, 1, 1); }

Conclusion

Transforms are pretty cool! Check out the MDN article on transform for more info. I did not cover the transform function matrix() in this playground since it’s fairly complicated but here is a link if you’re interested.

HTML
CSS
Output