CSS - translateZ()

The translateZ() CSS function moves the element along the z-axis of the 3D space. This transformation is characterized by a <length> defining how much it moves.

Examples

HTML

HTML
<p>foo</p>
<p class="transformed">bar</p>

CSS

CSS
p { 
  width: 50px;
  height: 50px;
  background-color: teal;
}

.transformed {
  /* Adding a perspective to create a 3d space */
  /* The user is looking "from" 500px and we */
  /* push the element forward (toward the user) */
  /* by 200px */
  transform: perspective(500px) translateZ(200px);
}

Result

Syntax  

CSS
translateZ(t)

Description  

The translateZ() CSS function moves the element along the z-axis of the 3D space. This transformation is characterized by a <length> defining how much it moves.

translateZ(tz) is a shorthand for translate3d(0, 0, tz).

 

t
Is a <length> representing the z-component of the translating vector. It 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

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/transform-function/translatez

CSS CSS Transforms NeedsCompatTable Reference