CSS translate Property

The translate property allows you to move an element independently along the X, Y, and Z axes without affecting the layout of surrounding elements.

selector { translate: x-axis [y-axis] [z-axis]; }
none Specifies that no translation should be applied to the element.
<length> Moves the element by a fixed distance using units like px, em, or rem.
<percentage> Moves the element by a percentage relative to its own width or height.

Code Examples

A basic example showing a 100px box shifted 50px to the right and 20px down from its original position.

.box {
  width: 100px;
  height: 100px;
  background-color: #ff5733;
  translate: 50px 20px;
}

An advanced example using JavaScript to dynamically update the translate property, creating a smooth movement effect without triggering layout shifts.

<div id="player" style="width: 50px; height: 50px; background-color: #007bff; transition: translate 0.3s;"></div>
<button onclick="moveRight()">Move Player</button>

<script>
let pos = 0;
function moveRight() {
  const player = document.getElementById("player");
  pos += 50;
  player.style.translate = pos + "px 0px";
}
</script>

Pro Tip

You can perfectly center an absolute positioned element by setting top: 50% and left: 50%, then applying translate: -50% -50%. This offsets the element by exactly half its own width and height, regardless of how large it is, which is much more flexible than using negative margins.

Deep Dive

Think of the translate property like sliding a physical piece of paper across a desk. The paper moves, but the desk and everything else on it stays put. This property is part of the individual transform properties, meaning it works separately from the transform property. When you use a single value, it moves the element along the X-axis. Two values handle the X and Y axes, and a third value handles the Z-axis for 3D movements. Percentages are calculated based on the size of the element itself, not the parent container, which makes it incredibly useful for centering logic. Because it happens on the GPU via the compositor thread, it is much smoother than moving elements using top, left, bottom, or right.

Best Practices

Use the translate property instead of the older transform: translate() function when you only need to move an element. This keeps your CSS cleaner and prevents you from accidentally overwriting other transformations like scale or rotate. Always prefer translate over position offsets like top or left for animations to ensure high-performance rendering and a steady 60 frames per second. Stick to simple pixel or rem units for fixed offsets and percentages for fluid or responsive adjustments.

Common Pitfalls

A common mistake is forgetting that percentages refer to the element's own dimensions. If you try to move an element 50% thinking it will move half the width of the parent, you will be surprised when it only moves half of its own width. Another trap is browser support; while modern browsers handle it well, very old legacy projects might still require the older transform: translate() syntax. Also, keep in mind that translate does not trigger a reflow, so it won't push other elements out of the way; it simply floats over them.

Accessibility

If you use translate to move interactive elements like buttons or links, ensure they remain within the visible viewport so keyboard users can still see where the focus is. Avoid using fast or jarring translation animations that might trigger motion sickness in sensitive users. Always consider wrapping your movement logic in a prefers-reduced-motion media query to respect user system settings.

Dev Data Table: translate property

default none
animatable yes
inherited no
experimental no
year_intro 2015
year_standard 2022
js_syntax_1 element.style.translate = "100px 50px";
js_syntax_2 element.style.setProperty("translate", "100px 50px");
js_note When manipulating this property in JavaScript, ensure you provide the units as a string, such as "50%" or "20px".
browsers { "Chrome": 104, "Edge": 104, "Firefox": 72, "Safari": 14.1, "Opera": 90, "Chrome Android": 104, "Safari on iOS": 14.5, "Samsung Internet": 20, "Opera Mobile": 71 }
results render here...