CSS rotateX() Function
rotateX() function is used to rotate elements around the x-axis in a three-dimensional space.
rotateX() function is used in 3D-transforms. It's used with the CSS
transform property to rotate an element around the x-axis. It can be used in conjunction with other rotation functions such as
rotateZ() to rotate the element around the y and z axes if required.
These functions can also be used in place of the
rotate3d() function (and vice-versa).
rotateX() function is the equivalent of this:
Here's an example of using
rotateX() to rotate an element 60 degrees around the x axis. It's the equivalent of
rotate3d(1, 0, 0, 60deg).
You can also use negative values. A negative value will rotate the element in a counter-clockwise direction.
Note that depending on the axis the element is being rotated around, the difference between a positive angle and a negative one might not always be apparent when viewing it on the screen.
The official syntax of the
rotateX() function is as follows:
The parameter specifies the angle of the rotation. It can be any valid angle value. A positive value results in a clockwise rotation, a negative value results in a counter-clockwise rotation.
The angle can be represented with any of the following unit identifiers:
- Degrees. There are 360 degrees in a full circle.
- Gradians, also known as "gons" or "grades" (although these aren't valid unit identifiers — you should still use
gradas the unit identifier). There are 400 gradians in a full circle.
- Radians. There are 2Ï€ radians in a full circle.
- Turns. There is 1 turn in a full circle.
The unit identifier is optional for zero angles. For example, both
rotateX(0) are valid (but
rotateX(45) is not).
rotateX()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.