The translate property moves an element along the X, Y, and optionally Z axes — independently of the transform property.
The initial value is none. It is not inherited. A non-none value creates a stacking context. Pair it with rotate and scale for clear UI motion, or keep using transform: translate() when you need one combined list.
Not deprecated. Standard-track individual transform property. Fixed apply order with siblings: translate → rotate → scale → then transform.
translate: none | <length-percentage> | <lp> <lp> | <lp> <lp> <length> | initial | inherit;Examples: none; · 40px; · 50% -40%; · 20px 4rem 150px;
| Value | Description | Try it |
|---|---|---|
none | Default. No translation | Try it |
| One value | Move along X only (length or %) | Try it |
| Two values | Move along X then Y | Try it |
| Percentages | Relative to the element’s own width (X) and height (Y) | Try it |
| Three values | X, Y, and Z (Z must be a length) | Try it |
initial / inherit | Reset to none, or take the parent value | Try it |
translatePick axes and distances, then apply the property to a transformable element.
px, rem) or percentages of the element’s own box.translate on the element (not on a non-replaced inline).transition so hover/focus motion eases smoothly.| Piece | Required? | Role |
|---|---|---|
| Value | Yes | none or 1–3 axis distances |
| Transformable element | Yes | Block/replaced boxes; not non-replaced inline |
| Layout space | — | Unchanged — only the painted position moves |
| With rotate / scale | Optional | Fixed order: translate, then rotate, then scale |
Pick a value. The blue box moves; the dashed outline shows its original layout space.
Each snippet focuses on translate. Extra CSS is only for a clear demo box. Use Try It Yourself for a live editor.
One value shifts the element horizontally.
<style>
.box {
width: 64px;
height: 64px;
background: #2563eb;
translate: 40px;
}
</style>
<div class="box"></div>translate: 40px moves only on the X axis.transform: translate(40px), but as its own property.Two values set horizontal and vertical offsets.
<style>
.box {
width: 64px;
height: 64px;
background: #2563eb;
translate: 48px 24px;
}
</style>
<div class="box"></div>48px moves right.24px moves down (negative moves up).transform: translate(48px, 24px).Percentages are relative to the element’s own width and height.
<style>
.box {
width: 80px;
height: 80px;
background: #2563eb;
translate: 50% -25%;
}
</style>
<div class="box"></div>50% of an 80px-wide box is 40px right.-25% of 80px is 20px up.-50% -50% often help center overlays with absolute positioning.If the box moves but layout looks “empty,” check these first.
Neighbors do not reflow. Gaps and overlap can appear because the original box still occupies space.
X % uses the element’s width; Y % uses its height — not the parent’s size.
A third value must be a length (px, rem, …). Percentage on Z is invalid.
Individual transforms always apply as translate → rotate → scale, then any transform list. Declaration order does not change that.
Any value other than none creates a stacking context, which can affect how z-index and overlays layer.
translate is a browser CSS property for individual transforms. Node.js, Deno, and Bun do not apply it.
Individual translate is widely supported in modern browsers (from about Chrome/Edge 104, Firefox 72, Safari 14.1). Prefer unprefixed syntax.
Bottom line: Safe to teach for modern browsers. IE has no support — use transform: translate() if you must support legacy engines. It is not a runtime API.
none — no offset.One line: translate shifts where an element is painted; layout space stays put.
Learn how unicode-bidi controls embedding levels for bidirectional text.
8 people found this page helpful