CSS translateZ() Function

The CSS translateZ() function is used to move elements in a three-dimensional space along the z-axis.

The translateZ() function works like this:

It moves the position of the element on the z-axis by the amount provided by t. In other words, it moves the element towards, or further away from the viewer by the specified amount.

Example

Here's an example of using translateZ():

<style>
  .translated {
    transform: perspective(200px) translateZ(60px);
  }
</style>

<img src="/pix/bg/tiles/checkerboard_100x100_2.gif" alt="Sample image"> 
<img class="translated" src="/pix/bg/tiles/checkerboard_100x100_2.gif" alt="Sample image">

You can think of the z-axis as coming out of the screen towards the viewer. Therefore, a movement along that axis won't necessarily be apparent to the viewer unless you apply other styles that bring out the effect.

In this example, I've also included the perspective function in order to demonstrate the effect of translateZ(). The result is that the element appears to be closer to the viewer than the other (non-translated) element.

Negative Values

You can also provide negative values if required. This results in the element appearing further away from the user.

<style>
  .translated {
    transform: perspective(200px) translateZ(-60px);
  }
</style>

<img src="/pix/bg/tiles/checkerboard_100x100_2.gif" alt="Sample image"> 
<img class="translated" src="/pix/bg/tiles/checkerboard_100x100_2.gif" alt="Sample image">

Official Syntax

The official syntax of the translateZ() function is as follows:

Possible Values

The translateZ() function accepts the <length> argument.

The value is a length (e.g. 10px, 10vw, etc) that defines how much the element will move by.

CSS Specifications

The translateZ() function is defined in CSS Transforms Module Level 1 (W3C Working Draft)

Browser Support

The following table provided by Caniuse.com shows the level of browser support for this feature.