CSS transform: translateZ()

The CSS translateZ() function is used to define the transform property to move an element front/back on z-axis. The figure given below, shows how the translation of an element on z-axis performs:

It becomes difficult to understand the function translateZ(), until you see the effect on 3D box. Therefore, I've created a normal Die, and a Die whose font face (the face with value 1) is translated on Z-axis by 40px, like shown in the figure given below:

That is, the translation of an element using translateZ(), performs in this way:

Because on the plane surface, it is not possible to show you, how the translateZ() function is used to translate an element on the z-axis, without using other properties, that helps to display the thing to visualize how the translateZ() function works.

Therefore, it is up to you, how you utilize this function, as I've explained how the function works. But let me create an example to show the sample work of translateZ() function, with an example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      #tzb {width: 160px; height: 160px; transform-style: preserve-3d;
         transform: rotate3d(12, -7, 1, 20deg); margin: 80px auto;}
      .a, .b, .c, .d {width: 100%; height: 100%; position: absolute;}
      .a {transform: translateZ(0px); background: rgba(10, 216, 96, 0.72);}
      .b {transform: translateZ(60px); background: rgba(233, 12, 12, 0.72);}
      .c {transform: translateZ(120px); background: rgba(181, 245, 6, 0.986);}
      .d {transform: translateZ(180px); background: rgba(70, 6, 245, 0.986);}
   </style>
</head>
<body>
   
   <div id="tzb">
      <div class="a"></div>
      <div class="b"></div>
      <div class="c"></div>
      <div class="d"></div>
   </div>
   
</body>
</html>

Output

In above example, I've defined different color for the background of each translated DIV on the z-axis, to let you spot the change very clearly.

Note - The transform-style property is used set whether the child elements are positioned in 3D space or not.

Note - The rotate3d() function rotates an element along x-axis, y-axis, and z-axis, at once, with a particular degree.

CSS translateZ() Syntax

The syntax of translateZ() function in CSS, is:

transform: translateZ(length)

Note - Length units that can be used in CSS, are defined in its separate tutorial.

CSS translateZ() Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      #tzb {width: 160px; height: 160px; transform-style: preserve-3d;
         transform: rotate3d(1, 1, 1, 60deg); margin: 80px auto;}
      .a, .b, .c, .d, .e, .f {width: 100%; height: 100%; position: absolute;}
      .a {transform: translateZ(0px); background: green;}
      .b {transform: translateZ(60px); background: maroon;}
      .c {transform: translateZ(120px); background: yellow;}
      .d {transform: translateZ(140px); background: red;}
      .e {transform: translateZ(-60px); background: blue;}
      .f {transform: translateZ(-120px); background: gray;}

   </style>
</head>
<body>
   
   <div id="tzb">
      <div class="a"></div>
      <div class="b"></div>
      <div class="c"></div>
      <div class="d"></div>
      <div class="e"></div>
      <div class="f"></div>
   </div>
   
</body>
</html>

Output

CSS Online Test

« Previous Tutorial Next Tutorial »