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.

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

Syntax

translateZ(t)

Values

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.	$\left(\begin{array}{ccc}10& 0& 0\\ 01& 0& 0\\ 0& 0& 1& t\\ 0& 0& 0& 1\end{array}\right)$

Examples

HTML

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

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