transform
The transform property applies 2D or 3D translation, rotation, scaling, or skewing to an element.
Syntax
transform: <function>...; /* translate(), rotate(), scale() */
Examples
.card:hover { transform: translateY(-4px) scale(1.02); }
.icon { transform: rotate(45deg); }
Output
Lifts and slightly enlarges the card on hover and rotates the icon 45 degrees.
Notes
Transforms are GPU-accelerated and do not trigger layout, making them ideal for animation. Functions apply right to left. Set transform-origin to change the pivot. Individual translate/rotate/scale properties also exist.
Browser & runtime support
| Environment | Since version |
|---|---|
| chrome | 36 |
| firefox | 16 |
| safari | 9.0 |
| edge | 12 |