Translate Property
Last updated: 2026-09-13
translate Translate Property
The translate property is an individual transform property that moves an element in 2D or 3D space. It has the same effect as transform: translate(), but as a standalone property it can control translation separately without affecting other transforms such as rotation and scaling — very useful when you want to animate each transform independently.
| Category | |
|---|---|
| Initial Value | none |
| Inherited | No |
| Applies To | |
| Animation Type | |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
translate: none | <length-percentage> [<length-percentage> [<length>]?]?;⚙️ Values
| Value | Type | Description |
|---|---|---|
none | Keyword | No translation |
<length> | <percentage> | Type | The translation value (x, y, z can be specified) |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| translate | ✓ v57 | ✓ v12 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| Supported in all major browsers | |||||
Tip： translate accepts 1 to 3 values: one value moves along X only; two values move along X and Y; a third value moves along Z as well (which needs a perspective to be visible).
Tip： Percentages in translate are relative to the element's own size, not its parent — unlike left/top.
❓ FAQ
QWhat is the difference between the translate property and left/top?
Atranslate only produces a visual shift: it does not change the document flow and triggers no reflow; the browser promotes the element to a compositor layer handled by the GPU, so the animation stays smooth. left/top change the layout position, forcing a reflow and repaint on every frame — worse performance, and they push surrounding elements around. For animations and hover movement, prefer translate or transform: translate().
QIs there a performance difference between translate and transform: translate()?
ABoth render almost identically and both run on a compositor layer. The real difference is control: the standalone translate property can be animated on its own without overwriting transform values that already exist on the element, such as rotation or scaling — great for animating each transform independently. transform: translate() lives in the same list as the other functions, so changing it means rewriting the whole list.
QWhat are translate percentages relative to, and why is that different from left?
APercentages in translate are relative to the element's own dimensions, while percentages in left/top are relative to the containing block. For example, translate: 100% moves the element right by its own width. Leveraging this, position: absolute plus translate: -50% -50% centers an element both horizontally and vertically without knowing its size.
QWhy can't I see any visual effect from translateZ in my CSS code?
AtranslateZ moves along the Z axis, but without perspective the projection size does not change, so the element looks static. Give the parent a perspective property, or include the perspective() function in a transform, to see the near-large-far-small depth change. For the same reason, the third value of translate only matters in 3D scenes.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
