The essentials
Quick reference
One focused task per row. Jump to the related section for complete, working examples.
| Use | Syntax | Examples |
|---|---|---|
| Translate | .item { transform: translate(1rem, -0.5rem); } | View examples |
| Rotate | .item { transform: rotate(8deg); } | View examples |
| Scale | .item { transform: scale(1.05); } | View examples |
| Use individual properties | .item { translate: 1rem 0; rotate: 5deg; scale: 1.1; } | View examples |
| Compose functions | .item { transform: translateX(2rem) rotate(10deg); } | View examples |
| Move the origin | .door { transform-origin: left center; } | View examples |
| Choose reference box | svg path {
transform-box: fill-box;
transform-origin: center;
} | View examples |
| Set scene perspective | .scene { perspective: 800px; } | View examples |
| Preserve child depth | .card { transform-style: preserve-3d; } | View examples |
| Hide the reverse face | .face { backface-visibility: hidden; } | View examples |
| Remove optional motion | @media (prefers-reduced-motion: reduce) {
.item { transform: none; };
} | View examples |
Transforms change how a box is painted and hit-tested without moving it through normal layout. Compose operations in an intentional order, use individual transform properties for independent effects, and avoid scaled or animated interfaces that become unreadable or trigger vestibular discomfort.
Step by step
Detailed examples
Transform paint without changing normal flow
Translated or scaled elements retain their original layout space and may overlap neighbors. Transforms usually create a stacking context and a containing block for positioned descendants. Use layout tools when surrounding content should reflow around the new geometry.
.card { transition: transform 160ms ease; }
.card:hover { transform: translateY(-.25rem) scale(1.01); }Treat operation order as part of the design
Transform functions compose into matrices, and translate-then-rotate generally differs from rotate-then-translate because later coordinate axes have changed. Individual translate, rotate, and scale properties compose in a defined order before transform, making independently authored effects easier to combine.
.badge { translate: 0 0; rotate: -3deg; }
.badge[data-open] { translate: 0 -.5rem; }
.badge:hover { scale: 1.08; }Choose the pivot and reference geometry
transform-origin defaults near the box center for CSS boxes and controls rotation and scaling pivots. Percentage translations refer to the transform reference box; transform-box is particularly important for SVG, where view-box and fill-box geometry differ.
.door { transform-origin: left center; transform: rotateY(-12deg); }
.icon path { transform-box: fill-box; transform-origin: center; transform: rotate(20deg); }Establish perspective on a scene
Perspective on a parent projects transformed children into depth; perspective() inside transform affects that element's transform list. preserve-3d keeps descendants in the 3D scene until a flattening property intervenes. 3D effects still need clear reading order and keyboard interaction.
.scene { perspective: 800px; }
.card { position: relative; transform-style: preserve-3d; rotate: y 180deg; }
.face { position: absolute; inset: 0; backface-visibility: hidden; }
.back { rotate: y 180deg; }Preserve usability under motion preferences
Transforms can animate efficiently but large zooms, spins, and parallax may cause discomfort. Use prefers-reduced-motion to remove nonessential motion rather than merely speeding it up. Never scale focused controls so small that targets or focus indicators become hard to use.
.drawer { transition: translate 240ms ease; }
.drawer[hidden] { translate: -100% 0; }
@media (prefers-reduced-motion: reduce) { .drawer { transition: none; } }Local code tester
Explore transform composition
Change translate, rotate, scale, origin, and reduced-motion behavior on a card.
Sources and further reading
References
Authoritative documentation used to verify and expand this cheat sheet.
Help us improve
Found a typo or missing example?
Tell us what would make this cheat sheet clearer, more complete, or more useful.