CSS · Chapter 34 of 44
CSS Transforms
The transform property lets you move, rotate, scale, or skew an element without affecting the document's normal flow, using functions like translate(), rotate(), scale(), and skew().
Transforms are commonly combined with transitions or animations for smooth visual effects.
Syntax
transform: translate(x, y) | rotate(deg) | scale(n) | skew(deg);Transform functions
translate(x, y) moves an element, rotate(deg) spins it, scale(x, y) resizes it, and skew(x, y) slants it — all without affecting layout of surrounding elements.
Combining transforms
Multiple functions can be chained in one transform value, like transform: rotate(10deg) scale(1.1);, applied in the order written.
Example 1 (css)
.card:hover {
transform: scale(1.05) rotate(2deg);
}Output
The card slightly grows and tilts when hoveredTwo transform functions combine to scale up and rotate the card on hover.
Key points
- transform moves, rotates, scales, or skews elements.
- Transforms don't affect the layout flow of surrounding elements.
- Multiple transform functions can be chained together.
- Transforms pair well with transitions for smooth effects.
💡 Note: transform-origin controls the pivot point for rotate and scale (default is the element's center).