translateZ() CSS Function

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

Description

The translateZ() CSS function is a 3D transformation function that moves an element along the z-axis, which is perpendicular to the screen. Unlike 2D transformations like translateX() or translateY(), translateZ() creates the illusion of depth by shifting elements closer to or farther from the viewer. Positive values move the element toward the user, while negative values move it away from the user.

This function is often used in combination with the transform property and can enhance visual effects in 3D layouts, such as card flips, rotating cubes, or parallax scrolling. Using translateZ() effectively usually requires a parent element with perspective applied to give the movement along the z-axis a realistic depth appearance.

For example, consider a 3D card effect:

<div class="card-container">
  <div class="card">Front</div>
</div>

.card-container {
  perspective: 800px;
}

.card {
  width: 200px;
  height: 300px;
  background-color: #4caf50;
  transform: translateZ(50px);
  transition: transform 0.5s;
}

In this example, the card appears closer to the viewer by 50 pixels along the z-axis. Adjusting the value of translateZ() can create dramatic depth effects when combined with rotations using rotateY() or rotateX().

Because translateZ() only affects the visual position in 3D space, it does not change the element's layout in the document flow, similar to how transform works in general.

Syntax

transform: translate(tz);

Values

tzA <length> representing the z-component of the translating vector. A positive value moves the element towards the viewer, and a negative value farther away.

Any length units accepted in CSS are accepted as values - for example, pixels (px), inches (in), points (pt), etc. A positive value shifts forward, a negative one backwards. A value of 0 does not change the position of the element.

Example

HTML

<div class="scene">

  <div class="box">

    <p>Hover Me</p>

  </div>

</div>

CSS

/* 1. The Container: Creates the 3D space */

.scene {

  width: 200px;

  height: 200px;

  margin: 100px auto;

  perspective: 600px; /* Essential: Defines how far the viewer is from the Z=0 plane */

}



/* 2. The Element: The object moving in 3D space */

.box {

  width: 100%;

  height: 100%;

  background-color: #3498db;

  display: flex;

  align-items: center;

  justify-content: center;

  color: white;

  font-weight: bold;

  border-radius: 10px;

  transition: transform 0.5s ease; /* Smooths the movement */

  box-shadow: 0 5px 15px rgba(0,0,0,0.3);

}



/* 3. The Action: Moving the box closer to the viewer */

.scene:hover .box {

  /* Positive Z moves the element "closer" to your eyes */

  transform: translateZ(100px);

  background-color: #2ecc71;

}

Result

Editor

Browser Support

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