Transforms don't change layout
B is drawn 90px wide and overlaps its neighbours, but its layout box is still 60px and C hasn't moved. getComputedStyle reports every transform as one matrix(): a, b, c, d hold the scale and rotation, the last two numbers the translation.
The transform property moves, rotates, scales and skews an element's painted box, around a point set by transform-origin, without changing the layout around it; with perspective the same functions work in 3D.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Make a .card that lifts 6px and grows 3% on hover, smoothly, without moving any other card.
Center a 120px × 80px .popup inside a position: relative parent using position: absolute and a transform.
Make a .needle (a thin bar) that rotates 45deg around its bottom end when its .gauge parent is hovered.
Explain it without notes
What does transform do to an element, and how is it different from changing left or width?
What is transform-origin, and what is its default?
Why does transform: rotate(90deg) translate(100px) move the element differently from translate(100px) rotate(90deg)?
Which side effects does a transform have on stacking and positioning?
What do perspective, transform-style: preserve-3d and backface-visibility each do in a 3D flip card?
Preview
Console
Nothing logged yet.Expected console output
layout size (offsetWidth): 60
drawn size (bounding rect): 90
C still starts at x = 170
transform: matrix(1.5, 0, 0, 1.5, 20, 10)