CSS transforms have gained such popularity that it's rare not to see some sort of transformation in a website nowadays—from button shapes and animations to layouts.

Let's dig in.


The transform CSS property allows us to scale, rotate, skew, and translate elements in 2D and 3D spaces, and it looks like this:

transform: translate(-10px, 10%);


This property supports the following values: scale(), skewX() and skewY(), translate(), rotate(), matrix(), and perspective().

Note that X-axis equals horizontal and Y-axis equals vertical.


An easy way to remember which axis is which is by saying this: "x is a cross so the x-axis is across".


The scale() function scales an element. It's also the shorthand ...

Get Web Developer's Reference Guide now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.