Lesson 14 · Motion and scale

Transforms

The transform property changes how a box is drawn, never where layout puts it. Follow one rule, transform: translate(60px, 20px) rotate(30deg) scale(1.5), function by function: the card moves, turns about its centre and grows while its layout box and the paragraph below stay put. See the list become one matrix(a, b, c, d, e, f), see why the order of functions matters, and why a transform is cheap to animate.

12 min9 steps5 questionsAdvanced

Fig 14 · Interactive

Loading figure…

or ← →

Check yourself

5 quick questions

Pick an answer to see why. Your score saves with your progress.

01A div has transform: translate(60px, 20px). What happens to the paragraph right after it?

A transform changes only how the box is drawn. Layout still uses the untransformed box, so neighbours do not move; the drawn box may overlap them.

02Where does rotate(30deg) turn a box around, if you set nothing else?

The initial value of transform-origin is 50% 50%, the middle of the box. A positive angle turns it clockwise.

03For translate(60px, 20px) rotate(30deg) scale(1.5), which entries of matrix(a, b, c, d, e, f) hold the move?

e and f are the move: 60 and 20. a, b, c and d hold the turn and the size: 1.5·cos 30° ≈ 1.3, 1.5·sin 30° = 0.75, -0.75 and 1.3.

04You swap the first two functions: rotate(30deg) translate(60px, 20px) scale(1.5). What changes?

Matrix multiplication depends on order. Read left to right, rotate now turns the box's own axes first, so the move runs along the turned axes: about 41.96px right and 47.32px down instead of 60 and 20. (Measured in page coordinates the rightmost function acts first; the matrix is the same either way.)

05Why is animating transform usually cheaper than animating width or top?

width and top change layout, so every frame reruns layout and paint. A transform change only needs style and compositing (and paint only if the element is not on its own layer).

Key terms

Glossary

transform: A CSS property that changes how an element is drawn (moved, turned, scaled, skewed) without changing its layout. Its initial value is none.
Transform function: One step in a transform list, such as translate(60px, 20px), rotate(30deg) or scale(1.5).
transform-origin: The fixed point a transform works around. Its initial value is 50% 50%, the centre of the box.
Layout box: The box layout gives an element in the flow. offsetWidth and offsetHeight report its size, and a transform does not change it.
Drawn box: Where the element is actually painted after its transform. getBoundingClientRect() measures its axis-aligned bounds.
matrix(a, b, c, d, e, f): One 2D transform written as six numbers: x' = a·x + c·y + e and y' = b·x + d·y + f. Every 2D transform list reduces to one.
Compositing: The browser's last rendering step: stacking the painted layers, with their transforms, into the final picture.
Stacking context: A group of elements stacked together as one unit in the z-order. Any transform other than none creates one.

Fine print

Notes and sources

A real browser applies the whole transform list at once, as one matrix. The figure adds the functions one at a time so you can see what each one does.
The page is a sketch in CSS px: the card's layout box is 80 × 50 px and the paragraph's position follows from a 16px top margin; real pages also have the body's margins and font metrics.
Whether paint is skipped is up to the browser: it needs the element on its own compositor layer, which browsers often create for transform animations. Layout is skipped either way.
Any transform other than none also makes the element a stacking context and the containing block for its absolute- and fixed-position descendants (CSS Transforms 1, §2).
MDN says the functions are multiplied in order from left to right, so measured in page coordinates the rightmost function acts on the points first (scale, then rotate, then translate). Reading left to right, with each function working in the box's own moved and turned coordinates, describes the same matrix (CSS Transforms 1, transformation matrix computation).
Paste the page and the rule into files, open the page and run getComputedStyle(document.querySelector(".card")).transform in the console: it prints the matrix shown in the figure.

Quiz Unlocks after the last step.