CSS Transforms
Transform moves, scales, rotates and skews elements in their own visual layer — without disturbing the layout around them, and GPU-accelerated. It's the muscle behind nearly every smooth interaction on the web.
1. The four operations
.a { transform: translate(20px, -10px); } /* move */
.b { transform: scale(1.1); } /* grow */
.c { transform: rotate(-6deg); } /* tilt */
.d { transform: skewX(12deg); } /* slant */
/* combined — applied right to left */
.e { transform: translateY(-4px) scale(1.05); }Crucially, transforms are visual only: the element's layout slot stays put, so neighbors never reflow — which is exactly why animating transforms is smooth where animating margin or width stutters.
2. Origin, centering, and the hover classic
/* pivot point (default: center) */
.dial { transform-origin: bottom left; }
/* the absolute-centering idiom */
.modal {
position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%);
}
/* the ubiquitous card hover */
.card { transition: transform .2s ease; }
.card:hover { transform: translateY(-4px) scale(1.02); }transform-origin sets the pivot for rotate/scale. The translate(-50%, -50%) trick centers against the element's own size — the classic modal recipe. And that hover lift? Every card on this site uses it.
3. Try it yourself
Give the card a hover state that lifts and grows it (translateY(-6px) scale(1.03)) with a 0.2s transition, and tilt the badge -8° permanently.
4. Quiz — check your understanding
CSS Transforms Quiz
4 questions · pass at 60%Q1. Transforming an element affects its neighbors' layout…
Q2. Why do transforms animate more smoothly than margins?
Q3. translate(-50%, -50%) moves the element by half of…
Q4. transform-origin controls…
Every lesson quiz you pass (60%+) is saved in your browser and counts toward the CSSmatic Certificate of Completion.