CSS Reference Function


The translateX() function is a 2D transform function used to translate an element along the x-axis.

It takes a translation value tx as an argument. This value specifies the amount by which an element is to be translated.

The translation value tx is provided either as a <length> or as a percentage. Not including a unit type will cause the number to be interpreted as a “user unit”.

Positive translation values will move the element along the positive direction of the x-axis, and negative values will move it in the opposite direction.


transform: translateX(300px);
transform: translateX(-50%);
transform: translateX(150%);

The official syntax looks as follows:

transform: translate(tx);

For a better understanding of the transform functions, please refer to the transform entry.

Browser Support

The following is the support table for two-dimensional CSS transformations:

CSS3 2D Transforms

Method of transforming an element including rotating, scaling, etc. Includes support for `transform` as well as `transform-origin` properties.

W3C Candidate Recommendation

Supported from the following versions:


  • 36
  • 16
  • 10
  • 12
  • 9

Mobile / Tablet

  • 9.0
  • 123
  • No
  • 123
  • 124

* denotes prefix required.

  • Supported:
  • Yes
  • No
  • Partially
  • Polyfill

Stats from caniuse.com

Written by . Last updated December 11, 2016 at 9:45 pm by Manoela Ilic.

Do you have a suggestion, question or want to contribute? Submit an issue.