CSS - translate3d()

The translate3d() CSS function moves the position of the element in the 3D space. This transformation is characterized by a 3-dimension vector whose coordinates define how much it moves in each direction.

Examples

Using a single axis translation

HTML

Copy Code

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

CSS

Copy Code

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

.transformed {
  transform: perspective(500px) translate3d(10px,0px,0px);
  /* equivalent to perspective(500px) translateX(10px)*/
  background-color: blue;
}

Result

Combining z-axis and x-axis translation

HTML

Copy Code

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

CSS

Copy Code

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

.transformed {
  transform: perspective(500px) translate3d(10px,0px,100px);
  background-color: blue;
}

Result

Syntax

CSS

Copy Code

translate3d(tx, ty, tz)

Description

tx: Is a <length> representing the abscissa of the translating vector.
ty: Is a <length> representing the ordinate of the translating vector.
tz: 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 & tx \\ 0 & 1 & 0 & ty \\ 0 & 0 & 1 & tz \\ 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/translate3d

CSS CSS Transforms NeedsCompatTable Reference