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

Copy Code

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

CSS

Copy Code

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

Copy Code

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 ℝ²	Homogeneous coordinates on ℝℙ²	Cartesian coordinates on ℝ³	Homogeneous coordinates on ℝℙ³
This transform applies to the 3D space and cannot be represented on the plane.		A translation is not a linear transform in ℝ³ and cannot be represented using a matrix in the Cartesian coordinates system.	$(\begin{matrix} 1 & 0 & 0 & 0 \\ 0 & 1 & 0 & 0 \\ 0 & 0 & 1 & t \\ 0 & 0 & 0 & 1 \end{matrix})$

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