MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

The translateZ() CSS function moves affected elements along the z-axis of the 3D space; that is, closer to or farther away from the viewer. This transformation is defined by a <length> which specifies how far inward or outward the element or elements move.

translateZ(tz) is a shorthand for translate3d(0, 0, tz), where tx and ty are both zero, indicating no movement along those two axes.

Syntax

translateZ(tz)

Values

tz
A <length> which specifies the Z-component of the translating vector to apply to the element, where a positive value moves the element toward the viewer and a negative value moves the element away from the viewer.
tz can't be a <percentage> value; in that case the property containing the transform is considered invalid.
Cartesian coordinates on ℝ2 Homogeneous coordinates on ℝℙ2 Cartesian coordinates on ℝ3 Homogeneous coordinates on ℝℙ3
This transform applies to the 3D space and cannot be represented on the plane. A translation is not a linear transform in ℝ3 and cannot be represented using a matrix in the Cartesian coordinates system. 10000100001t0001

Examples

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

HTML

<p>Hello</p>
<p class="transformed">world!</p>

The first paragraph in the HTML above is plain; the second one, however, has the class "transformed" applied, which will add the perspective and translation to pull the element toward the user (essentially rendering it larger on a 2D display).

CSS

p {
  position:relative;
  width: 50px;
  height: 50px;
  left: 200px;
  background-color: teal;
}

.transformed {
  transform: perspective(500px) translateZ(200px);
}

While the CSS for <p> is unremarkable here, what really matters is the class "transformed". Let's take a look at what it does.

First, perspective is used to position the viewer relative to the plane that lies upon the plane that plane where Z=0 (in essence, the surface of the screen). A value of 500px means the user is 500 pixels in front of (outward from the screen from) imagery located at Z=0.

Then, the translateZ() function is used to move elements with the class "transformed" 200 pixels outward from the screen, toward the user. This will have the effect of making the elements 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

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 12.0 -webkit
36
(Yes) 10.0 -moz
16.0 (16.0)
10.0 15.0-webkit
23

4.0 -webkit
9.0

Feature Android Chrome for Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 3.0-webkit (Yes)-webkit (Yes) (Yes) (Yes) 22-webkit 3.2 (Yes)-webkit
9.0

See also

Document Tags and Contributors

 Contributors to this page: mfluehr, Sheppy, Sebastianz, mrstork, SphinxKnight
 Last updated by: mfluehr,