Imagine your website could feel less flat—more like a space where elements actually move toward or away from the user. That’s exactly what the CSS translateZ() function does. It shifts an element along the Z-axis in a 3D environment, making it appear closer or farther without changing its actual size.

How translateZ() Actually Works

On a standard 2D screen, browsers only render height and width—not depth. So translateZ() on its own has no visible effect. You need to add perspective, either via the perspective property on a parent or the perspective() function directly on the element. Without it, the element stays flat.

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

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

In the second example, hovering the box makes it move 100px closer—visually it looks bigger, but it’s actually the distance that changed. This is not the same as scaling. scale() resizes the element; translateZ() repositions it in 3D space.

Syntax and Arguments

The function takes one argument—a length value—and is used with the transform property:

  • Positive values (e.g., 100px, 5rem) pull the element closer to the user.
  • Negative values (e.g., -50px, -8em) push it farther away.

This is from the CSS Transform Module Level 2 specification.

Bringing Depth to Life: Perspective and preserve-3d

To see the effect, you need a 3D context. Start with a scene container:

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

Apply perspective to the scene and transform-style: preserve-3d to the parent. Then move the box:

.scene {
  perspective: 800px;
}
.parent {
  transform-style: preserve-3d;
}
.box {
  transform: translateZ(100px);
}

If you rotate the parent, you’ll see the box hasn’t grown—it’s just closer to you than its parent.

perspective Property vs. perspective() Function

Both define projection, but they work differently:

  • Property (perspective: 800px) is set on the parent and applies to all 3D children.
  • Function (perspective(800px)) is applied directly to a single element and must come before the 3D transform in the value.
/* Works */
.element {
  transform: perspective(800px) translateZ(100px);
}

/* Won’t work — order matters */
.element {
  transform: translateZ(100px) perspective(800px);
}

Performance Boost? Yes, Really

Here’s a practical edge: translateZ(0) shifts rendering from the CPU to the GPU. This hack prevents flickering during animations and makes transitions smoother—especially useful for interactive elements on business sites, like dropdown menus or modals.

If you’re building a multilingual site (EN/RU/EL) for Cyprus or EU clients, smooth performance matters. A glitchy menu on an e-commerce checkout can cost conversions.

Browser Support

All modern browsers support translateZ()—no polyfills needed. Still, always test on older devices if your audience uses them.

Practical Takeaways for Your Next Project

  • Use translateZ() for subtle hover effects on CTAs or product cards—it adds depth without jarring animations.
  • Combine with perspective and preserve-3d to create immersive galleries or interactive dashboards.
  • Avoid using it as a scale() replacement—they solve different problems.
  • For GDPR-compliant sites (common in the EU), keep animations accessible: prefer prefers-reduced-motion as a fallback.