CSS rotateX() Function

❮ Previous Functions Next ❯


.example {
  transform: rotateX(45deg);

Hello World!


The rotateX() css function defines a transformation that rotates an element around the abscissa (horizontal axis) without deforming it.

Note: rotateX(angle) is equivalent to rotate(angle) or rotate3d(1, 0, 0, angle).

The axis of rotation passes through an origin, defined by the transform-origin CSS property.

Note: Unlike rotations in the 2D plane, the composition of 3D rotations is usually not commutative. In other words, the order in which the rotations are applied impacts the result.

Version: CSS3

Standard Syntax


The value of rotation created by rotateX() is specified by an angle.

If positive, the movement will be clockwise; if negative, it will be counter-clockwise.

Browser Support

The numbers in the table specify the first browser version that fully supports the property.


Function Arguments

The following table describes the arguments of this function.

Argument Description
angle Defines the rotation of the element. A positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one.

See also

❮ Previous Functions Next ❯