CSS Transforms Explained — Rotate, Scale, Translate

Pick up a photo from a table and turn it a little. The other photos do not move, the table does not get bigger, and the photo still sits in the same spot — it just looks turned. CSS transforms work exactly like that. They change how a box looks — its angle, its size, its position on screen — without changing where it lives in the layout. Every other element stays exactly where it was.

Diagram — see how it fits together

What a transform does

A transform is a visual effect, not a layout change. When you rotate a box by 20 degrees, the browser still reserves the box's original, unrotated space on the page, and the neighbours do not shift to make room. This is the big difference from changing margin or width, which push other elements around. Transforms are also cheap for the browser to draw, which is why they are the right tool for hover effects and small animations.

The four transforms

There are four transform functions, and you write them inside the transform property:

.tilted  { transform: rotate(20deg); }
.bigger  { transform: scale(1.5); }
.moved   { transform: translate(30px, 10px); }
.slanted { transform: skewX(-15deg); }

rotate() turns the box by an angle in degrees. scale() grows or shrinks it — scale(2) doubles the size, scale(0.5) halves it. translate() moves it right and down by the two values you give. skewX() and skewY() slant it sideways, like pushing the top of a rectangle while the bottom stays put.

Combining transforms and the pivot point

You can put several functions in one transform property, separated by spaces: transform: translate(50px, 0) rotate(20deg);. But the order matters — translate-then-rotate gives a different result from rotate-then-translate, because each step happens in the coordinate system left by the previous one. The pivot point is controlled by transform-origin: the default is the centre of the box, but transform-origin: top left; makes the box turn around its top-left corner, like a door turning on its hinge.

Common mistakes

• Writing two transform lines in one rule — the second one wins and the first is ignored; combine them into a single line instead.
• Thinking translate() moves other elements — it does not; only the box itself moves visually, and its original space stays reserved.
• Forgetting the unit on rotate() — rotate(20) without deg is invalid and the browser ignores it.
• Writing scale(150%) — scale takes a plain number, so scale(1.5) is correct and a percentage is not.
• Applying a transform to a plain inline element like a span — transforms do not apply to non-replaced inline elements; give it display: inline-block first.

Remember

• A transform changes how a box looks, not where it lives in the layout.
• rotate() turns, scale() grows or shrinks, translate() moves, skew() slants.
• Combine functions in one transform line; the order changes the result.
• transform-origin sets the pivot point — centre by default, or a corner like a door hinge.
• Use transforms for hover effects: they never push other elements around.

Example explained

• .rotate { transform: rotate(20deg); } — the blue box turns 20 degrees clockwise, while the row keeps its original spacing.
• .scale { transform: scale(1.2); } — the orange box grows to 1.2 times its size, but its neighbours do not move to make room.
• .translate { transform: translate(20px, 10px); } — the pink box shifts 20px right and 10px down from where it would normally sit.
• .skew { transform: skewX(-15deg); } — the purple box slants sideways, like a rectangle pushed at the top.
• .hover-card:hover { transform: scale(1.1) rotate(-2deg); } — hovering grows the white card slightly and tilts it, combining two transforms in one line.