Transforms
Transforms move, rotate, scale and skew elements visually — without affecting the layout around them. They're the foundation of most CSS animation, because browsers can animate them smoothly on the graphics card.
Translate, rotate, scale
| Function | Effect |
|---|---|
translate(x, y), translateX(), translateY() | Move |
rotate(angle) | Turn clockwise (deg, turn, rad) |
scale(x, y) | Resize (1 = normal, 2 = double) |
skew(x-angle, y-angle) | Slant |
Transformed elements keep their original space in the layout — neighbours don't move — so transforms never cause the page to reflow.
Individual transform properties
The standalone translate, rotate and scale properties can be set — and animated — independently. With the single transform property, changing one function means rewriting them all.
Order matters
Functions in transform apply from right to left, so the same functions in a different order give different results: rotating first changes the direction of the later translation.
transform-origin
By default, transforms happen around the element's centre. transform-origin moves that pivot point.
Centring with translate
Because percentages in translate refer to the element's own size, translate: -50% -50% is the classic way to centre an absolutely positioned element of unknown size (lesson 31).
3D transforms
perspective on a parent gives depth to its children's 3D transforms; smaller values look more dramatic. rotateX, rotateY and translateZ work in three dimensions.
A card flip
transform-style: preserve-3d keeps children in 3D space, and backface-visibility: hidden hides each face when it's turned away.
Performance
Transforms and opacity are the cheapest properties to animate: the browser can move already-painted layers without recalculating layout. Animating width, top or margin instead forces layout on every frame and can stutter. Remember that a transform also creates a stacking context and a containing block for fixed-position children.