CSS transform Property
The transform property lets you modify the coordinate space of the CSS visual formatting model (translate, rotate, scale, skew).
Description & Usage
The transform property applies 2D or 3D visual transformations to an element without altering surrounding document flow.
Functions like translateY(), scale(), and rotate() are hardware-accelerated by GPU compositing, producing silky 60fps animations.
Property Specifications
| Property Feature | Specification |
|---|---|
| Category | Animation |
| Initial Value | none |
| Inherited | No (not inherited) |
| Applies To | Transformable elements |
Syntax
transform: translate(x, y) | rotate(deg) | scale(factor) | skew(deg);Property Values
| Value | Description |
|---|---|
| translateY(-4px) | Moves element 4px upward. |
| rotate(45deg) | Rotates element 45 degrees clockwise. |
| scale(1.1) | Enlarges element by 10%. |
Code Examples
Floating Card Hover Animation
.card {
transition: transform 0.3s ease;
}
.card:hover {
transform: translateY(-6px);
}
Creates a subtle 3D floating lift effect on hover.