The CSS rotateX() function rotates an element around the x-axis in a three-dimensional space. Specifically, it vertically flips the element, making it tilt backward or forward, depending on the angle set. It is one of many transform functions used in the transform property.

The x-axis is the axis of rotation, so the element turns vertically. Imagine a pin is stuck to the left side of an element and it can only turn up or down.

In the demo below, rotateX(0) is given as the element’s default rotation:

.demo-element { transform: rotateY(var(--deg)); transition: transform 0.3s ease; }

The rotateX() function is defined in the CSS Transforms Module Level 2 specification.

Syntax

rotateX() = rotateX( [ <angle> | <zero> ] )

Arguments

/* angle in degrees */ rotateX(45deg) /* rotates 45 degrees backwards */ rotateX(-90deg) /* rotates 90 degrees forwards */

/* angle in turns */ rotateX(0.5turn) /* rotates 180 degrees (half a full turn) */ rotateX(1turn) /* Rotates a full 360-degree turn */

/* angle in radians…