W3cubDocs

/CSS

translateZ()

The translateZ() CSS function repositions an element along the z-axis in 3D space, i.e., closer to or farther away from the viewer. Its result is a <transform-function> data type.

This transformation is defined by a <length> which specifies how far inward or outward the element or elements move.

Note: translateZ(tz) is equivalent to translate3d(0, 0, tz).

Syntax

translateZ(tz)

Values

tz: A <length> representing the z-component of the translating vector. A positive value moves the element towards the viewer, and a negative value farther away.

Cartesian coordinates on ℝ²	Homogeneous coordinates on ℝℙ²	Cartesian coordinates on ℝ³	Homogeneous coordinates on ℝℙ³
This transformation applies to the 3D space and can't be represented on the plane.		A translation is not a linear transformation in ℝ³ and can't be represented using a Cartesian-coordinate matrix.	$(\begin{matrix} 1 & 0 & 0 & 0 \\ 0 & 1 & 0 & 0 \\ 0 & 0 & 1 & t \\ 0 & 0 & 0 & 1 \end{matrix})$

Examples

In this example, two boxes are created. One is positioned normally on the page, without being translated at all. The second is altered by applying perspective to create a 3D space, then moved towards the user.

HTML

<div>Static</div>
<div class="moved">Moved</div>

CSS

div {
  position: relative;
  width: 60px;
  height: 60px;
  left: 100px;
  background-color: skyblue;
}

.moved {
  transform: perspective(500px) translateZ(200px);
  background-color: pink;
}

What really matters here is the class "moved"; let's take a look at what it does. First, the perspective() function positions the viewer relative to the plane that lies where z=0 (in essence, the surface of the screen). A value of 500px means the user is 500 pixels "in front of" the imagery located at z=0.

Then, the translateZ() function moves the element 200 pixels "outward" from the screen, toward the user. This has the effect of making the element appear larger when viewed on a 2D display, or closer when viewed using a VR headset or other 3D display device.

Result

Specifications

Specification	Status	Comment
CSS Transforms Level 2 The definition of 'transform' in that specification.	Editor's Draft	Adds 3D transform functions to the CSS Transforms standard.

Browser compatibility

Please see the <transform-function> data type for compatibility info.