translateZ() CSS Function

Description

The CSS translateZ() function is used to move elements in a three-dimensional space along the z-axis. The z-axis is the axis that points towards or away from the viewer.

The translateZ() function takes a single parameter, which is the distance to move the element along the z-axis. The value can be specified in any CSS unit, such as pixels, centimeters, or ems.

For example, the following CSS code will move the element with the class moved 200 pixels closer to the viewer:

.moved {
  transform: translateZ(200px);
}

The translateZ() function can be used to create a variety of effects, such as:

• Making elements appear closer or farther away from the viewer
• Creating a sense of depth in a scene
• Animating elements along the z-axis

It is important to note that the translateZ() function will only work if the perspective() CSS property is also set. The perspective() property defines the distance between the viewer and the plane that the element is moving on.

For example, the following CSS code will create a scene with a sense of depth, with the element with the class moved appearing closer to the viewer:

body {
  perspective: 500px;
}

.moved {
  transform: translateZ(200px);
}

The translateZ() function is a helpful tool for creating 3D effects in CSS. It can be used to create a variety of effects, from simple animations to complex scenes.

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.

Example

<img class="translate" src="images/nature.jpg" alt="Nature Image">

.translate {

    transform: perspective(200px) translateZ(-60px);

}

Browser Support

The following table will show you the current browser support for the CSS translateZ() function.

Desktop
12	12	10	15	4

Tablets / Mobile
18	10	14	3.2	1	3

Last updated by CSSPortal on: 7th October 2023