The CSS translateZ() function adds depth to an element, drawing it closer or farther in space. In other words, it shifts an element along the Z-axis in a 3D space.

.box:hover {
  transform: translateZ(100px);
}

.box.perspective:hover {
  transform: perspective(500px) translateZ(100px);
}

Either the perspective() function or perspective property is necessary for translateZ() to work. Without either one, there’s no effect.

While it looks like the .box element is getting bigger on hover, that’s not what is happening. When you hover over the box, it actually moves closer to you by 100 pixels, making it appear larger.

translateZ() should not be mistaken for an alternative to the scale() function or scale property. Perspective and scale are two different concepts.

The translateZ() function is defined in the CSS Transform Module Level 2 specification.

Syntax

translateZ() = translateZ(<length>)

The translateZ() function takes a single <length> argument that defines how far the element is from the front of the screen. It is used with the transform property.

Arguments

/* Positive lengths */
transform: translateZ(100px);
transform: translateZ(5rem);

/* Negative lengths */
transform: translateZ(-50px);
transform: translateZ(-8em);

The translateZ() function takes a single argument:

  • <length>: The distance of the element from the front of the screen. When it is positive, the element moves closer to the user, and further away when it’s negative.

How It Works

The translateZ() function is tricky because it moves an element along the Z-axis, which is not visually perceptible in a browser by default. Since browsers only render elements by their height and width, not their depth, the translateZ() function may appear to do nothing.

A three-dimensional plane on top of a grid with perspective, showing the X, Y, and Z axes.

To show its depth and projection, you need to use either the perspective property or perspective() function. Additionally, you can set transform-style to preserve-3d on the parent element, which tells CSS that child elements should be positioned in 3D space.

Projection and Perspective

On a website, there isn’t a sense of depth — that is, “closeness” or “furtherness” — since elements are flattened on a 2D screen. Whether it’s translate(200px) or translate(20px), we perceive the element at the same distance, so there isn’t any perspective at all unless we explicitly enable it.

Take for example the following HTML:

<div class="scene">
  <div class="parent">
    <div class="box">translateZ(100px)</div>
  </div>
</div>

First, enable perspective on the whole scene:

.scene {
  perspective: 800px;
}

Then, set transform-style to preserve-3d on the parent so children are also transformed in 3D:

.parent {
  transform-style: preserve-3d;
}

Now move the .box 100px closer to the user using translateZ():

.box {
  transform: translateZ(100px);
}

Even though it looks like the box grew 100px in size, when you rotate the parent to the side, you’ll see that the .box size didn’t increase — it’s the distance between the .parent and the .box that did.

A tall blue rectangle rotated left along the Y-axis adding perspective.

perspective vs. perspective()

Both accomplish the same thing: defining the element’s projection. The perspective property is applied to the parent for all 3D child elements, while the perspective() function can only be applied to a single 3D element and must be declared before the 3D transform function.

The perspective Property

.parent {
  perspective: 800px;
}

.child-1 {
  transform: translateZ(200px); /* Defined within a projection of 800px */
}

.child-2 {
  transform: translate3D(100px, 200px, 150px); /* Defined within a projection of 800px */
}

The perspective() Function

.element {
  transform: translateZ(100px) perspective(800px); /* Nope ❌ */
}

.element {
  transform: perspective(800px) translateZ(100px); /* Yep ✅ */
}

Using translateZ() to Optimize Web Performance

The translateZ() function can also boost page performance. CSS 3D transform functions use the GPU, which is faster than the CPU for element rendering. This can prevent flickering during animations and make transitions smoother.

Developers add translateZ(0) to shift rendering from the CPU to the GPU. If you’re struggling with a glitching animation, applying translateZ(0) is a practical way to fix it.

Specification

The translateZ() function is defined in the CSS Transform Module Level 2 specification.

Browser Support

The translateZ() function is available on all modern browsers.

References