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

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

CSS

CSS
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

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

CSS

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

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

Result

Syntax  

CSS
translate3d(tx, ty, tz)

Description  

w

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.

 

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 ℝ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. 100tx010ty001tz0001

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