A transformed parent traps position: fixed
Even translateX(0), which moves nothing, makes the parent the containing block, so top: 0; left: 0 means the parent's corner (50px down, 20px in). With transform: none the element is fixed to the viewport again. filter, perspective, will-change: transform and contain: paint do the same.
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
with transform: top 50 left 20
without transform: top 0 left 0