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.

Activate the switch in the following demo, then hover over the box to see it appear closer:

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 a length of 100 pixels, making it appear larger. We’ll get more into that in just a bit so it’s more obvious what’s happening there.

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’s 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.

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

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. To show that, take for example the following HTML:

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

Firstly, we’ll enable some perspective in the whole scene:

.scene {
  perspective: 800px;
}

Then, we’ll set transform-style to preserve-3d in the parent, so children will also be transformed in 3D:

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

Now we 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, but it’s the distance between the .parent and the .box that did.

perspective vs. perspective()

Both do the same work: define the element’s projection. The perspective property is applied to the parent for all 3D 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 ✅ */
}

It can also be used to optimize web performance

Did you know that you can use the translateZ() function to boost our website’s performance? CSS 3D transform functions use the GPU, which is faster and more superior to the CPU for element rendering. This performance hack prevents flickering during animations and makes transitions smoother.

Developers add translateZ(0) to shift rendering from the CPU to the GPU, improving performance. If you’re struggling with a glitching animation, now you’ve s way to fix it!

Demo

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

• Tricks for Using CSS translateZ and perspective() by William Le

More on 3D transforms!