CSS rotateX() Function

The CSS rotateX() function is used to rotate elements around the x-axis in a three-dimensional space.

The rotateX() function is used in 3D-transforms. It's used with the CSS transform property to rotate an element around the x-axis. It can be used in conjunction with other rotation functions such as rotateY() and rotateZ() to rotate the element around the y and z axes if required.

These functions can also be used in place of the rotate3d() function (and vice-versa).

The rotateX() function is the equivalent of this:

Here's an example of using rotateX() to rotate an element 60 degrees around the x axis. It's the equivalent of rotate3d(1, 0, 0, 60deg).

<style>
  .rotated {
    transform: rotateX(60deg);
  }
  div {
    padding: 20px;
    margin: 20px;
    width: 120px;
    background: limegreen;
    color: white;
    font-family: sans-serif;
  }
</style>

<div class="rotated">
  Rotated.
</div>
<div>
  Not rotated.
</div>

Negative Values

You can also use negative values. A negative value will rotate the element in a counter-clockwise direction.

Example:

<style>
  .rotated {
    transform: rotateX(-60deg);
  }
  div {
    padding: 20px;
    margin: 20px;
    width: 120px;
    background: limegreen;
    color: white;
    font-family: sans-serif;
  }
</style>

<div class="rotated">
  Rotated.
</div>
<div>
  Not rotated.
</div>

Note that depending on the axis the element is being rotated around, the difference between a positive angle and a negative one might not always be apparent when viewing it on the screen.

Official Syntax

The official syntax of the rotateX() function is as follows:

Possible Values

The parameter specifies the angle of the rotation. It can be any valid angle value. A positive value results in a clockwise rotation, a negative value results in a counter-clockwise rotation.

The angle can be represented with any of the following unit identifiers:

deg: Degrees. There are 360 degrees in a full circle.
grad: Gradians, also known as "gons" or "grades" (although these aren't valid unit identifiers — you should still use grad as the unit identifier). There are 400 gradians in a full circle.
rad: Radians. There are 2Ï€ radians in a full circle.
turn: Turns. There is 1 turn in a full circle.

Zero Angles

The unit identifier is optional for zero angles. For example, both rotateX(0deg) and rotateX(0) are valid (but rotateX(45) is not).

CSS Specifications

The rotateX() function is defined in CSS Transforms Module Level 1 (W3C Working Draft)

Browser Support

The following table provided by Caniuse.com shows the level of browser support for this feature.