CSS translate Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The translate CSS property is a transform that repositions an element along the horizontal and vertical axes (and, in some contexts, the z axis) without changing its intrinsic layout footprint. Unlike properties that alter box dimensions or margins, translate performs a geometric transformation of the element’s rendering - the element is painted in a different place, but the space it originally occupied in the document flow remains unchanged. Because it is a transform, it affects the element’s visual presentation and hit-testing position, but it does not force reflow of surrounding content.

As a composited transform, translate composes with other transform functions; order matters. For example, translating an element and then rotating it produces a different result than rotating first and then translating. In practice, authors frequently use the standalone transform property to combine translations with rotations, scales, and skews, but the dedicated translate property (and its longhands) can make intent clearer and simplify animations. The point around which transforms are applied depends on the element’s transform origin, which you can control with transform-origin.

Because translations are typically handled by the compositor rather than the layout engine, they are performant for animations and interactive motion - moving something with translate often avoids layout thrashing and can be hardware-accelerated. This makes it ideal for animating position, implementing sliding UI panels, and creating parallax effects. Note, however, that while the visual position changes, text reflow, accessibility considerations, and focus order remain based on the document order and layout, so translated elements may still interact with other page elements as if they had not been moved.

When working with translations you’ll also encounter related, more granular properties such as translateX, which targets movement along a single axis. Percentages used in translate values are resolved against the element’s own reference box (its bounding box in the relevant axis), and nested transforms on parent and child elements compound: a translation on a parent affects the coordinate system in which a child’s translation is applied. Understanding these interactions is key to predictable positioning when combining multiple transforms and when designing motion for responsive layouts.

Definition

Initial value: none
Applies to: transformable elements
Inherited: no
Computed value: as specified, but with relative lengths converted into absolute lengths
Animatable: a transform
JavaScript syntax: object.style.translate

Interactive Demo

Syntax

translate: none | <length-percentage> [ <length-percentage> <length>? ]?

Values

noneSpecifies that no translation should be applied.
Single <length-percentage> valueA <length> or <percentage> that specifies a translation along the X-axis. Equivalent to a translate() (2D translation) function with a single value specified.
Two <length-percentage> valuesTwo <length> or <percentage> that specify the X and Y axis translation values (respectively) of a 2D translation. Equivalent to a translate() (2D translation) function with two values specified.
Three valuesTwo <length-percentage> and single <length> values that specify the X, Y, and Z axis translation values (respectively) of a 3D translation. Equivalent to a translate3d() (3D translation) function.

Example

HTML

<div class='demo'>

  <h2>CSS translate() example</h2>

  <div class='stage'>

    <div class='box'>Box</div>

  </div>

  <p class='note'>The box uses transform: translate(60px, 30px);</p>

</div>

CSS

/* Basic reset */
* { box-sizing: border-box; }

body { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; background: #f5f7fb; color: #222; padding: 40px; }

.demo { max-width: 600px; margin: 0 auto; }

.stage {
  position: relative;
  height: 160px;
  background: linear-gradient(90deg, #eef2ff, #fff);
  border: 1px dashed #d7def8;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
}

.box {
  width: 88px;
  height: 88px;
  background: #2563eb;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-weight: 600;
  transform: translate(60px, 30px); /* translateX 60px, translateY 30px */
  transition: transform 0.3s ease;
}

.box:hover {
  transform: translate(0px, 0px) rotate(6deg);
}

.note {
  margin-top: 12px;
  color: #4b5563;
  font-size: 14px;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS translate property. Hover over a browser icon to see the version that first introduced support for this CSS property.