CSS - translateX()

The translateX() CSS function moves the element horizontally on the plane. This transformation is characterized by a <length> defining how much it moves horizontally.

Examples

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: translateX(10px);
  background-color: blue;
}

Result

Syntax  

CSS
translateX(t)

Description  

The translateX() CSS function moves the element horizontally on the plane. This transformation is characterized by a <length> defining how much it moves horizontally.

translateX(tx) is a shortcut for translate(tx, 0).

 

t
Is a <length> representing the abscissa of the translating vector.
Cartesian coordinates on ℝ2 Homogeneous coordinates on ℝℙ2 Cartesian coordinates on ℝ3 Homogeneous coordinates on ℝℙ3

A translation is not a linear transform in ℝ2 and cannot be represented using a matrix in the cartesian coordinates system.

10t010001 10t010001 100t010000100001
[1 0 0 1 t 0]

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/translatex

CSS CSS Transforms NeedsCompatTable Reference