CSS Attributes Index CSS Transforms
Rotates an element around its horizontal axis.
{ transform: rotateX( angle ) }
| angle |
Floating point number representing an angle value expressed in degrees, gradians, radians, or turns. |
The rotateX( ) CSS function defines a transformation that rotates an element around its horizontal axis.
NOTE: rotateX( a ) is equivalent to rotate3d( 1, 0, 0, a ).
The fixed point that the element rotates around, also known as the transform origin, defaults to the center of the element, but can be set using the transform-origin property.
The passed parameter defines the amount of deviation from the element’s horizontal axis origin.
A value of 0 leaves the input unchanged.
If positive, the movement will be clockwise; if negative, the movement will be counter-clockwise.
The following example demonstrates the effects of applying the rotateX( ) function to change an element’s position in relation to its X-axis in 3D space.
Show me
The following example demonstrates the effects of applying the rotateX( ) function to change an element’s position in relation to its X-axis in 2D plane.
Show me
Notice use of a transition in the transform to better illustrate the amount of deviation from the origin.
rotate( ), rotate3d( ), rotateY( ), rotateZ( )