The box and the rule
The page has a div with class card, then a paragraph. Layout gives the card an 80 × 50 px box in the flow; the dashed outline marks it. With no transform, the card is drawn exactly in that box.
The value of transform is a list of transform functions. They change how the box is drawn, not where layout puts it. Read them left to right: each one works in the box's own coordinates, as the ones before left it (moved, then turned).
Function by function
translate moves the drawn box 60px right and 20px down. Nothing else moves: the dashed layout box and the paragraph stay put. The matrix keeps the move in its last two entries, e = 60 and f = 20.
rotate turns the box 30 degrees clockwise about the transform origin, by default its centre (transform-origin: 50% 50%). The turn fills a, b, c and d: cos 30° ≈ 0.87 and sin 30° = 0.5.
scale makes the box 1.5 times as wide and as tall, 120 × 75 px, still about its centre. It scales along the box's own turned sides. a, b, c and d grow 1.5 times; e and f stay 60 and 20.
What the browser does
The browser multiplies the three functions into one matrix(a, b, c, d, e, f). Ask getComputedStyle() for transform and it reports matrix(1.29904, 0.75, -0.75, 1.29904, 60, 20). Every point of the box goes through these six numbers.
Transforms never change layout. offsetWidth still reads 80, the layout width, while getBoundingClientRect() measures the drawn box: about 141 × 125 px. The card now covers the paragraph, which has not moved.
Swap the first two: rotate(30deg) translate(60px, 20px) scale(1.5). Now the move runs along the turned axes, so the centre lands about 42px right and 47px down instead of 60 and 20. Same functions, new order, different matrix.
Change transform, say in an animation, and the browser skips layout: no box moved in the flow. It can often skip paint too: the card stays a painted layer, and the compositor, which stacks layers into the final picture, just places it anew.
What happens
;; step 1/9 · layout-box index.html, inside <body>: <div class="card">card</div> <p>Text after the card.</p> layout box 80 × 50 px at (48, 32) paragraph starts at y = 98 px transform none (the initial value)
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. 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). 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.