translateX()

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.

Examples:

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.