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.
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:
For a better understanding of the transform functions, please refer to the transform entry.
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:
Mobile / Tablet
* denotes prefix required.
Stats from caniuse.com