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.
Any length units accepted in CSS are accepted as values ​​- for example, pixels (px), inches (in), points (pt), etc. A positive value shifts forward, a negative one backwards. A value of 0 does not change the position of the element.

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
Edge Chrome Firefox Opera Safari
121210154
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
1810143.213

Last updated by CSSPortal on: 7th October 2023