Transform
The transform property can translate, scale, rotate, or skew an element without changing normal document flow in the same way as layout properties. Transform functions can be composed.
Transforms are commonly used for visual movement because they can often be handled efficiently by browser rendering pipelines.
Transform Without Reflow
Transform Functions
.card:hover {
transform: translateY(-6px) scale(1.01);
}
.icon {
transform: rotate(45deg);
}💡 Multiple transform functions can be combined in a single transform declaration.
Key Takeaways
- Transforms visually modify an element without normal-flow repositioning.
- Translate and scale are common interaction effects.
Knowledge Check
Which property is commonly used for visual movement without changing normal layout geometry?