# rotateX()

The `rotateX()` CSS function defines a transformation that rotates an element around the abscissa (horizontal axis) without deforming it. Its result is a `<transform-function>` data type.

## Try it

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

Note: `rotateX(a)` is equivalent to `rotate3d(1, 0, 0, a)`.

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.

## Syntax

The amount of rotation created by `rotateX()` is specified by an `<angle>`. If positive, the movement will be clockwise; if negative, it will be counter-clockwise.

``````rotateX(a)
``````

### Values

`a`

Is an `<angle>` representing the angle of the rotation. A positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one.

Cartesian coordinates on ℝ^2 Homogeneous coordinates on ℝℙ^2 Cartesian coordinates on ℝ^3 Homogeneous coordinates on ℝℙ^3
This transformation applies to the 3D space and can't be represented on the plane. $\left(\begin{array}{ccc}1& 0& 0\\ 0& cos\left(a\right)& -sin\left(a\right)\\ 0& sin\left(a\right)& cos\left(a\right)\end{array}\right)$ $\left(\begin{array}{cccc}1& 0& 0& 0\\ 0& cos\left(a\right)& -sin\left(a\right)& 0\\ 0& sin\left(a\right)& cos\left(a\right)& 0\\ 0& 0& 0& 1\end{array}\right)$

## Examples

### HTML

``````<div>Normal</div>
<div class="rotated">Rotated</div>
``````

### CSS

``````div {
width: 80px;
height: 80px;
background-color: skyblue;
}

.rotated {
transform: rotateX(45deg);
background-color: pink;
}
``````

## Specifications

Specification
CSS Transforms Module Level 2
# funcdef-rotatex

## Browser compatibility

BCD tables only load in the browser