Order matters
Both boxes start at (20, 20). Box 1 moves right, then spins in place. Box 2 spins first, so its own x-axis points down and the same translate(100px) moves it down.
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
box 1 x: 120 y: 20
box 2 x: 20 y: 120