CSS translate3d() Function

CSS translate3d() Function

The CSS translate3d() function moves an element along the horizontal X axis, vertical Y axis, and depth Z axis.

It is used with the transform property to position elements in three-dimensional space. The X and Y values accept lengths or percentages, while the Z value accepts a length. Perspective can make movement along the Z axis appear closer to or farther from the viewer.

Syntax

translate3d(tx, ty, tz)

The translate3d() function requires three comma-separated arguments.

Examples:

transform: translate3d(50px, 20px, 30px);
transform: translate3d(0, 0, 100px);
transform: translate3d(-30px, 40px, -50px);
transform: translate3d(50%, 25%, 20px);
transform: translate3d(2rem, 1rem, 3rem);
transform: translate3d(0, 0, 0);

All three arguments are required, even when an axis has no movement.

For example, to move only along the Z axis:

transform: translate3d(0, 0, 80px);

To move horizontally and vertically without changing depth:

transform: translate3d(40px, 20px, 0);

The function must be used with a property that accepts transform functions, such as transform.

Parameters

The translate3d() function accepts three required parameters.

The first two arguments can use lengths or percentages. The third argument must be a length, although unitless zero is permitted.

Valid examples:

translate3d(20px, 30px, 40px)
translate3d(50%, -25%, 2rem)
translate3d(0, 0, -100px)
translate3d(calc(100% - 20px), 10px, 30px)

Invalid examples:

translate3d(20px, 30px)
translate3d(20px, 30px, 50%)
translate3d(20, 30, 40)
translate3d(20px 30px 40px)

These examples are invalid because they omit an argument, use a percentage for Z, contain nonzero unitless numbers, or omit the required commas.

How It Works

The translate3d() function changes an element's rendered position along three axes without changing its original position in normal document flow.

For example:

.box {
  transform: translate3d(50px, 20px, 100px);
}

This translates the element 50px horizontally, 20px vertically, and 100px along the positive Z axis.

The horizontal and vertical changes are visible without additional properties. However, movement along the Z axis generally requires perspective to create an apparent change in size or depth.

The function is represented internally by a four-by-four transformation matrix used for three-dimensional transformations.

Like other transforms, it does not cause surrounding elements to rearrange to accommodate the translated position.

3D Coordinate System

CSS three-dimensional transforms use three coordinate axes.

These directions describe the normal, unrotated CSS coordinate system.

X-Axis Movement

transform: translate3d(50px, 0, 0);

Moves the element 50px to the right.

Y-Axis Movement

transform: translate3d(0, 50px, 0);

Moves the element 50px downward.

Z-Axis Movement

transform: translate3d(0, 0, 50px);

Moves the element toward the viewer along the Z axis.

When rotation or other transforms are combined with translation, the final movement depends on the composed coordinate system.

Lengths and Percentages

The X and Y arguments accept CSS lengths and percentages.

Pixel Values

.box {
  transform: translate3d(40px, 20px, 60px);
}

Each translation distance is specified in pixels.

Relative Length Units

.box {
  transform: translate3d(2rem, 1rem, 3rem);
}

The distances depend on the root font size.

Percentage Values

.box {
  transform: translate3d(50%, 25%, 0);
}

The X and Y percentages are resolved against the width and height of the transform reference box, respectively.

For ordinary HTML elements, this is typically the element's border box.

For an element measuring 200px wide and 100px high, the example moves it 100px to the right and 25px downward.

Z-Axis Lengths

.box {
  transform: translate3d(0, 0, 5rem);
}

The Z axis requires a length. A percentage such as translate3d(0, 0, 50%) is invalid.

Z-Axis Translation

The third argument controls movement along the Z axis.

Positive values move the element toward the viewer:

transform: translate3d(0, 0, 100px);

Negative values move the element away from the viewer:

transform: translate3d(0, 0, -100px);

Without perspective, translating an isolated flat element along the Z axis may not produce an obvious visual change.

With perspective, an element moved toward the viewer appears larger, while an element moved away appears smaller.

Z-axis translation is different from the z-index property. The former changes an element's three-dimensional position, while the latter participates in stacking order.

Three-dimensional transforms also interact with stacking contexts, rendering order, and the transform-style property.

Using Perspective

The perspective property creates a viewing perspective for transformed descendants.

For example:

.scene {
  perspective: 500px;
}
.box {
  transform: translate3d(0, 0, 100px);
}

The element appears closer to the viewer and larger than it would without perspective.

Changing the Z translation:

.box {
  transform: translate3d(0, 0, -100px);
}

This moves the element away from the viewer, making it appear smaller.

The perspective distance affects how pronounced the depth effect appears. Smaller positive perspective distances produce stronger visual distortion.

Perspective can also be specified using the perspective() transform function:

.box {
  transform: perspective(500px) translate3d(0, 0, 100px);
}

The property and function are related but are not interchangeable in every layout. The perspective property affects transformed descendants, while the function participates in the transform list of the element itself.

Use a positive, nonzero perspective distance for a meaningful perspective effect.

Comparing Translation Functions

CSS provides several functions for translating elements along individual axes or multiple axes.

These declarations produce equivalent translations:

transform: translate3d(30px, 20px, 0);
transform: translate(30px, 20px);

These also describe the same translation:

transform: translate3d(0, 0, 50px);
transform: translateZ(50px);

Use translate3d() when movement along all three axes is needed or when explicitly expressing a three-dimensional translation.

For ordinary two-dimensional movement, translate() is often simpler.

Combining Transform Functions

The translate3d() function can be combined with other transform functions, including rotateX(), rotateY(), rotateZ(), and scale3d().

For example:

.box {
  transform: translate3d(30px, 20px, 80px) rotateY(30deg);
}

This combines three-dimensional translation with rotation around the Y axis.

The order of functions affects the final transformation.

Compare:

transform: translate3d(0, 0, 100px) rotateY(45deg);
transform: rotateY(45deg) translate3d(0, 0, 100px);

In the first declaration, the element rotates and is then translated along the original Z axis.

In the second declaration, the translation is affected by the rotation, so the element moves along a rotated Z axis.

Transform functions are composed in their written order, with their effects applied from right to left.

When combining three-dimensional transforms, use perspective and transform-style where appropriate to achieve the intended visual result.

CSS Custom Properties

Custom properties can store translation distances for all three axes.

For example:

.box {
  --move-x: 30px;
  --move-y: 20px;
  --move-z: 80px;
  transform: translate3d(var(--move-x), var(--move-y), var(--move-z));
}

Changing a custom property changes the corresponding translation distance.

Fallback values can also be provided:

.box {
  transform: translate3d(var(--x, 0px), var(--y, 0px), var(--z, 0px));
}

This approach is useful for reusable components and interactive effects.

For example, a hover state can change only the depth value:

.box {
  --depth: 0px;
  transform: translate3d(0, 0, var(--depth));
}
.box:hover {
  --depth: 80px;
}

When perspective is applied, increasing the depth makes the element appear closer to the viewer.

Example

The following example demonstrates translation along the X and Y axes while retaining a Z-axis value.

HTML:

<div class="translate3d-demo">
  <div class="translate3d-box">Original</div>
  <div class="translate3d-box translate3d-moved">Translated</div>
</div>

CSS:

.translate3d-demo {
  display: flex;
  flex-wrap: wrap;
  gap: 50px;
  padding: 25px;
}
.translate3d-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 110px;
  height: 70px;
  color: #fff;
  background-color: #3498db;
}
.translate3d-moved {
  background-color: #16a085;
  transform: translate3d(30px, 20px, 40px);
}

The green box moves 30px to the right, 20px downward, and 40px along the positive Z axis.

Without perspective, the depth movement does not produce a noticeable size change.

The original layout space remains reserved for the element.

Perspective Example

The following example demonstrates how positive and negative Z-axis translations affect the apparent size of elements when perspective is applied.

HTML:

<div class="translate3d-scene">
  <div class="translate3d-depth-box" style="--depth: -100px;">Farther</div>
  <div class="translate3d-depth-box" style="--depth: 0px;">Original</div>
  <div class="translate3d-depth-box" style="--depth: 100px;">Closer</div>
</div>

CSS:

.translate3d-scene {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 45px;
  min-height: 230px;
  padding: 30px;
  perspective: 500px;
  background-color: #f1f3f5;
}
.translate3d-depth-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 80px;
  color: #fff;
  background-color: #3498db;
  transform: translate3d(0, 0, var(--depth));
}

All three boxes have the same CSS width and height.

The box translated by -100px appears smaller because it moves away from the viewer.

The box with no Z translation retains its original apparent size.

The box translated by 100px appears larger because it moves toward the viewer.

The perspective distance of 500px controls the strength of the depth effect.

Transition Example

The translate3d() function can be animated with CSS transitions to create interactive depth effects.

HTML:

<div class="translate3d-transition-scene">
  <button class="translate3d-button" type="button">
    Hover or Focus
  </button>
</div>

CSS:

.translate3d-transition-scene {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 170px;
  padding: 30px;
  perspective: 500px;
  background-color: #f1f3f5;
}
.translate3d-button {
  padding: 18px 30px;
  border: none;
  color: #fff;
  background-color: #16a085;
  cursor: pointer;
  transform: translate3d(0, 0, 0);
  transition: transform 0.4s ease, background-color 0.3s ease;
}
.translate3d-button:hover,
.translate3d-button:focus-visible {
  transform: translate3d(0, -5px, 80px);
  background-color: #117864;
}
.translate3d-button:focus-visible {
  outline: 3px solid #f39c12;
  outline-offset: 5px;
}
@media (prefers-reduced-motion: reduce) {
  .translate3d-button {
    transition: none;
  }
}

When hovered or focused, the button moves 5px upward and 80px toward the viewer.

The perspective makes the button appear larger as it moves forward.

The reduced-motion media query disables the animated transition for users who prefer less motion.

Common Uses

The translate3d() function is useful for positioning and animating elements in three-dimensional space.

• 3D interfaces: Position elements at different depths.
• Interactive cards: Create hover and focus effects that move elements toward the viewer.
• Perspective layouts: Combine depth translation with a perspective property.
• 3D animations: Animate movement along the X, Y, and Z axes.
• Combined transforms: Move elements while rotating or scaling them.
• Layered effects: Create visual separation between elements at different depths.
• Custom properties: Control three-dimensional movement with reusable values.

For example:

.scene {
  perspective: 600px;
}
.card {
  transform: translate3d(0, 0, 0);
  transition: transform 0.3s ease;
}
.card:hover {
  transform: translate3d(0, -10px, 60px);
}

The card moves upward and toward the viewer when hovered.

Three-dimensional translation should be used when depth is part of the intended effect. For ordinary horizontal and vertical movement, a two-dimensional translation is usually sufficient.

Limitations

The translate3d() function has several requirements and behaviors to consider.

• It requires exactly three comma-separated arguments.
• The X and Y arguments accept lengths or percentages.
• The Z argument accepts lengths but not percentages.
• Nonzero unitless numbers are invalid translation distances.
• It does not change the element's original position in normal document flow.
• Translated elements can overlap surrounding content.
• Depth movement may not be visually apparent without perspective.
• Perspective affects the apparent size and position of translated elements.
• Transform order affects the final result when functions are combined.
• Three-dimensional rendering can be affected by stacking contexts and flattened rendering groups.
• Using a 3D transform does not guarantee hardware acceleration or improved performance.
• Excessive movement and depth effects can be distracting.

Valid and Invalid Values

Valid declarations:

transform: translate3d(20px, 30px, 40px);
transform: translate3d(50%, 25%, 0);
transform: translate3d(-2rem, 1rem, -50px);
transform: translate3d(0, 0, 100px);

Invalid declarations:

transform: translate3d(20px, 30px);
transform: translate3d(20px, 30px, 50%);
transform: translate3d(20, 30, 40);
transform: translate3d(20px 30px 40px);

Perspective and Rendering

Perspective is needed for a visible depth-scaling effect, but it is not required for the translate3d() function to be valid.

In complex 3D layouts, the transform-style: preserve-3d declaration can allow nested elements to participate in a shared three-dimensional rendering context.

.scene {
  perspective: 600px;
}
.group {
  transform-style: preserve-3d;
}
.group .box {
  transform: translate3d(0, 0, 80px);
}

Some CSS properties can cause descendants to be flattened even when preserve-3d is specified.

Accessibility

Provide a reduced-motion alternative for animated depth effects.

@media (prefers-reduced-motion: reduce) {
  .animated-3d {
    animation: none;
    transition: none;
  }
}

Make sure translated interactive elements remain visible and usable with a keyboard.

Browser Support

The CSS translate3d() function is Baseline Widely available and is supported by modern versions of Chrome, Edge, Firefox, Safari, and other major browsers.

Three-dimensional CSS transforms have been supported for many years. Older browsers may require vendor prefixes, but prefixes are not needed in current major browsers.

For current compatibility information, visit Can I Use? and search for CSS 3D transforms.

Specifications

The translate3d() function is defined in the CSS Transforms Module Level 2 specification.

The specification defines three-dimensional translation values and their representation in a transformation matrix.

Related functions include translate(), translateX(), translateY(), translateZ(), rotate3d(), and perspective().