Skip to main content

CSS translateZ() Function – How to Reposition Elements along Z-axis

translateZ() transforms an element by repositioning (translating) it three-dimensionally along the z-axis.

Illustration of the 3D Cartesian coordinate system

A three-dimensional Cartesian coordinate system showing the X-, Y-, and Z-axis

Syntax of the CSS translateZ() Function​

translateZ() accepts a single argument. Here is the syntax:

element {
  transform: translateZ(length);
}

The length argument specifies the distance you wish to move the element from its original z-axis position.

Illustration of the length argument

A three-dimensional Cartesian coordinate system with a red arrow defining the blue plane's translateZ length

Examples of the CSS translateZ() Function​

We often use translateZ() with the perspective() function. Below are some examples.

Buy CSS Grid book

How to use translateZ() with the CSS perspective() function​

img {
  width: 40%;
}

.second-image {
  transform: perspective(33px) translateZ(10px);
}

Try it on StackBlitz

Here's what we did in the snippet above:

  1. We used the perspective() function to define a 33px distance between the user and the z=0 plane.
  2. We used the translateZ() function to reposition the second-image ten pixels (10px) away from its original position along the z-axis.
note
  • Suppose the second-image's z-axis position is larger than or equal to the perspective() function's argument. In that case, the image will disappear as though it is behind the user. In other words, the selected item disappears when the user is in the same position as the element. Or when the element is behind the user.
  • The larger the user's distance to the element's z-axis position, the less intensive the perspective effect will be, and vice-versa.

How to use translateZ() with a 70px perspective​

img {
  width: 40%;
}

.second-image {
  transform: perspective(70px) translateZ(10px);
}

Try it on StackBlitz

Here's what we did in the snippet above:

  1. We used the perspective() function to define a 70px distance between the user and the z=0 plane.
  2. We used the translateZ() function to reposition the second-image ten pixels (10px) away from its original position along the z-axis.

Overview​

This article discussed what a CSS translateZ() function is. We also used examples to see how it works.