CSS Function - translateZ()

The translateZ() function in CSS is used to translate, or move, an element along the Z-axis in 3D space, i.e., either closer and farther from the viewer. It's one of the transformation functions in CSS that allows you to modify the position and appearance of elements on a web page. The result is a <transform-function> datatype.

Possible values

The function translateZ() can take only one parameter.

  • tz: Its a <length> value that specifies how far inward or outward the element or elements move. Represents the z-component of the translating vector [0, 0, tz]. A positive value moves the element towards the viewer, and a negative value farther away.

Syntax

transform: translateZ(tz);

The perspective() function defines the virtual distance between the plane of your computer screen and the HTML element you're applying translateZ to.

There are some unexpected behaviors shown by the use of perspective() and translateZ() functions.

When the value provided to translateZ() is more than or equal to the value of perspective(), the HTML element to which it is applied, disappears.

Any value, other than zero value (0px, 0, 0em) is allowed for perspective(), as it results in translateZ() effect getting ignored.

CSS translateZ() - Translation on hover

Following is an example of translateZ() function used with pseudo-class :hover, on a button. The size and position of the button changes on hover:

<html>
<head>
<style>
   div {
      height: 200px;
      width: 300px;
      border: 5px solid black;
      background-color: beige;
      margin: 50px;
      display: inline-block;
   }
   
   button {
      transform: perspective(150px) translateZ(20px);
      transition: transform 100ms linear;
      width: 80px;
      height: 30px;
      background-color: blue;
      color: white;
      margin: 30px;
   }

   button:hover {
      transform: perspective(150px) translateZ(80px);
   }
</style>
</head>
<body>
   <div>
      <h2>translateZ() example</h2>
      <button>click</button>
   </div>
</body>
</html>

CSS translateZ() - Translation with perspective()

Following is an example of translateZ() function along with perspective(). The div element where the function is applied, the position is based on the value passed to translateZ() function.

<html>
<head>
<style>
   div {
      height: 110px;
      width: 110px;
      border: 2px solid black;
      background-color: aquamarine;
      margin: 15px;
   }

   .translate-z-length {
      transform: perspective(200px) translateZ(50px);
      background-color: tomato;
   }
</style>
</head>
<body>
   <div>No translateZ() applied</div>
   <div class="translate-z-length">translateZ() applied</div>
</body>
</html>

Change the value of perspective() and translateZ() to see the effect.

The perspective() function is responsible for positioning the viewer relative to the plane, i.e to the surface of the screen (z=0). So, in the example above, value 0f 200px means, the user is 200 pixels in front of the image.

The value of translateZ(), 50px, means the element is moved 50px outward from the screen, toward the user. The element looks larger when viewed on a 2D display.

The order in which functions are written is important, as the composition of transforms is not commutative. The perspective() function should be placed before the translateZ() function.

Advertisements