The rotateX()
function is used to rotate an element about the x-axis in three-dimensional space.
It is equivalent to:
transform: rotate3d(1, 0, 0, <angle>);
Where rotate3d()
is the transformation function used to rotate an element in the three-dimensional space.
It takes an <angle>
as a value. The element is rotated then by the specified value about the x-axis. If the value is positive, the element is rotated in a clockwise direction, if it is negative it is rotated in a counter-clockwise direction. The clockwise direction is determined by looking at the x-axis starting from the end (where the pointing arrow usually is) towards the origin. See the rotate3d()
section in the transform entry for a visual representation of the clockwise direction along the x-axis.
Examples:
transform: rotateX(30deg); transform: rotateX(-135deg); transform: rotateX(90deg);
The following image shows the result of applying rotateX(50deg)
and rotateX(-50deg)
on an image:
The official syntax looks as follows:
transform: rotateX(<angle>);
For a better understanding of the transform functions, please refer to the transform entry.
Browser Support
The following is the support table for three-dimensional CSS transforms:
CSS3 3D Transforms
Method of transforming an element in the third dimension using the `transform` property. Includes support for the `perspective` property to set the perspective in z-space and the `backface-visibility` property to toggle display of the reverse side of a 3D-transformed element.
W3C Working Draft
Supported from the following versions:
Desktop
- 36
- 16
- 10
- 23
- 15
Mobile / Tablet
- 15
- 129
- No
- 129
- 130