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.
rotateX( ) in most cases is implemented with a transition to better illustrate the gradual transformation, unless an instantaneous or fixed change is desired, like when presenting flip horizontal or flip vertical effects.
The below example demonstrates the effects of applying the rotateX( ) function to a 2D object.
Show me
The following shows the difference between the rotateX( ), rotateY( ), and rotateZ( ) transform functions when applied to a 2D object.
Show me
To see how a rotateX( ) affects a 3d object, check this out.
Show me
For a brief overview, please see Understanding and Using CSS Transforms.
rotate( ), rotate3d( ), rotateY( ), rotateZ( )