The CSS transform property changes an element’s apparent shape or position without moving other elements in document flow. That makes it useful for visual effects, but a transformed element can overlap its neighbors. Start with the layout you need, then use a transform for the visual change. section 16.1
Four functions cover the basic effects:
- rotate(15deg) turns an element; a negative angle turns it the other way. section 16.1
- translate(20px, 40px) shifts it right and down; negative values reverse the direction. section 16.1
- scale(0.5) shrinks it to half size; values greater than 1 enlarge it. section 16.1
- skew(20deg) slants its shape; a negative angle slants it the other way. section 16.1
Make a button feel pressed
Set transform: translateY(0.1em) on .button:active, and reduce its box-shadow offset from 0.4em to 0.3em. The button moves down while the shadow stays in place. section 13.2.3
A transform can contain several space-separated functions. They take effect from right to left: transform: translate(50px, 0) rotate(15deg) rotates first, then moves right. Reverse the functions and the later rotation also turns the translation’s direction. Change the values live in DevTools when the result is hard to predict. section 16.1.2
Listing 16.3 Applying multiple transforms
.card {
max-inline-size: 300px;
padding: 0.5em;
margin-inline: auto;
background-color: white;
transform: translate(50px, 0) rotate(15deg); #1
}
The card rule combines translation and rotation in one declaration; reversing their order changes the visible movement. section 16.1.2
Transforms become especially useful with transitions and animations. Favor transforming position or size over animating positioning or explicit dimensions when possible: transforms, like opacity, avoid layout recalculation and repainting. A navigation label can slide and fade into view, while its icon scales on hover or focus. section 16.3 section 16.2.2
Transforms also work in three dimensions. translateZ() moves an element conceptually nearer or farther away; rotateX() pitches it, and rotateY() turns it sideways. A 3D rotation without perspective can look flat. A smaller perspective distance makes the depth effect stronger. section 16.4 section 16.4.1
Give several elements shared depth
For four tilted boxes, transform: perspective(200px) rotateX(30deg) on each box gives each its own perspective. Instead, set perspective: 200px on their common .row container and transform: rotateX(30deg) on each box so they share a perspective. section 16.4.1
Fly cards into place
Give a card grid perspective: 500px, then animate each card from transform: translateZ(-800px) rotateY(90deg) to translateZ(0) rotateY(0). Intermediate keyframes and opacity make the cards approach before turning fully toward the viewer. section 17.2.2
