Origins and individual properties
Hover the area: all three turn 30deg, each around its own origin. Hover one tile: scale adds to the rotation instead of replacing it. The origin is reported in px (top left is 0px 0px). The individual rotate property is separate from transform, which stays none.
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
origin: 0px 0px
rotate before hover: none
transform: none