CSS translateX() Function
translateX() function is used to move elements in a two-dimensional space along the x-axis (horizontally).
translateX() function works like this:
It moves the position of the element on the horizontal plane by the amount provided by
Here's an example of using
translateX() to move an element horizontally.
You can also provide negative values if required.
The official syntax of the
translateX() function is as follows:
translateX() function accepts the
The value is a length (e.g.
10vw, etc) that defines how much the element will move by.
It can can also be a number without a unit identifier. In this case the number gets interpreted as "user unit". A user unit in the the initial coordinate system is equivalent to the parent environment's notion of a pixel unit.
translateX()function is defined in CSS Transforms Module Level 1 (W3C Working Draft)
The following table provided by Caniuse.com shows the level of browser support for this feature.