Transform Property
Last updated: 2026-09-13
transform Transform Property
The transform property applies 2D or 3D geometric transformations to an element, including translation, rotation, scaling, and skewing. Transformations happen at the rendering stage and do not affect document flow layout, which makes them a common tool for high-performance visual effects. transform is one of the core properties of CSS animation and interaction design.
| Category | |
|---|---|
| Initial Value | none |
| Inherited | No |
| Applies To | all |
| Animation Type | transform |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
transform: none | <transform-function>+;
/* <transform-function> = translate() | translate3d() | rotate() | rotate3d() | scale() | skew() | matrix() | perspective() etc. */⚙️ Values
| Value | Type | Description |
|---|---|---|
none | Keyword | No transform is applied |
<transform-list> | Type | A list of transform functions: translate, rotate, scale, skew, and others |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| transform | ✓ v36 | ✓ v12 | ✓ v16 | ✓ v9 | ✓ v23 |
| Supported in all major browsers | |||||
Tip： Multiple transform functions in one transform value are separated by spaces and applied from right to left — the rightmost function applies first — so the order matters and changing it can produce a different result.
Warning： transform creates a new stacking context and containing block, which can change the positioning reference of position: fixed children.
❓ FAQ
QDoes the CSS transform property affect the layout of surrounding elements?
ANo. transform is a visual transformation handled during compositing: the element still occupies its original space and size in the document flow, so surrounding elements are completely unaffected and no reflow is triggered. That is exactly why transform animations perform far better than animating left or top. Note that the transformed element becomes the containing block for any position: fixed descendants.
QWhat is the difference between 2D transform and 3D transform?
A2D transforms work in the X/Y plane — translate(), rotate(), scale(), and skew(). 3D transforms add the Z axis with functions such as translateZ, rotateX, and rotateY. To see real depth you usually need a perspective on the parent element, often combined with transform-style: preserve-3d so children keep their 3D positions.
QWhy are transform animations fast? Do they use GPU acceleration?
AAnimating transform never triggers layout or repaint. The browser promotes the element to its own compositor layer, which the GPU composites, so the motion stays smooth even while the page scrolls or overlaps other elements. Compared with left/top, which force a reflow every frame, transform is the preferred way to reach 60fps animation, and adding will-change makes the result even more stable.
QIn what order are transform functions applied? Does translate before rotate matter?
AFunctions are applied from right to left: the rightmost one takes effect first. For example, transform: translate(20px) rotate(45deg) rotates first and then translates along the rotated direction, while transform: rotate(45deg) translate(20px) translates first and then rotates — the final results are completely different.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
