The rotateX() CSS function is used to apply a 3D rotation along the horizontal axis of an element. This transformation pivots the element around its x-axis, giving the impression that the element is tilting forwards or backwards in three-dimensional space. Positive values rotate the element clockwise when looking from the right-hand side, while negative values rotate it counterclockwise. The rotation is typically combined with other transformations using the transform property, which allows multiple functions such as rotateY() or translateZ() to work together.

When using rotateX(), it is important to consider the transform-style property. Setting it to preserve-3d ensures that child elements retain their 3D positioning, rather than flattening onto the plane of the parent element. Additionally, combining rotateX() with perspective on a parent container enhances the visual depth, making the rotation appear more realistic.

For example, applying a forward tilt to a card element could look like this in practice:

.card {
  transform: rotateX(30deg);
  transform-style: preserve-3d;
  transition: transform 0.5s ease;
}

This will rotate the card along its horizontal axis by 30 degrees, and the smooth transition creates an interactive effect when combined with hover states.

rotateX() is especially useful for creating dynamic 3D interfaces, flipping cards, or simulating depth in UI components such as div containers. It pairs well with animations using the transition or animation properties to create visually engaging effects.