The rotateX()CSS function defines a transformation that moves the element around the abscissa without deforming it. The amount of movement is defined by the specified angle; if positive, the movement will be clockwise, if negative, it will be counter-clockwise.
The axis of rotation passes by the origin, defined by transform-origin CSS property.
rotateX(a)is a shorthand for rotate3D(1, 0, 0, a).
In opposition to rotations in the plane, the composition of 3D rotations is usually not commutative; it means that the order in which the rotations are applied is crucial.
Syntax
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 transform applies to the 3D space and cannot be represented on the plane. | |||
Examples
HTML
<p>foo</p> <p class="transformed">bar</p>
CSS
p {
width: 50px;
height: 50px;
background-color: teal;
}
.transformed{
transform: rotateX(45deg);
background-color: blue;
}