# rotateX function

The `rotateX` function sets rotation around the X-axis in three-dimensional space. It is used together with the `transform` property. The property value is an angle in any angle units. A positive value rotates towards us, a negative value rotates away from us. The rotation is performed around the point specified by the `transform-origin` property.

## Syntax

`selector { transform: rotateX(angle); }`

## Example

In this example, the block will rotate by `180` degrees around the X-axis when hovered. The `transition` property has been added to smooth the rotation:

`<div id="elem">lorem ipsum</div>` `#elem { border: 3px solid black; width: 100px; height: 50px; transition: transform 3s linear; } #elem:hover { transform: rotateX(180deg); }`

:

## Example

Let's change the rotation axis using the `transform-origin` property:

`<div id="elem">lorem ipsum</div>` `#elem { border: 3px solid black; width: 100px; height: 50px; transition: transform 3s linear; transform-origin: center bottom; } #elem:hover { transform: rotateX(180deg); }`

:

## Example

Let's set a negative angle:

`<div id="elem">lorem ipsum</div>` `#elem { border: 3px solid black; width: 100px; height: 50px; transition: transform 3s linear; transform-origin: center bottom; } #elem:hover { transform: rotateX(-180deg); }`

:

## See also

- the `rotate` function
  that specifies rotation around the X- and Y-axes
- the `rotateY` function
  that specifies a rotation around the Y-axis
- the `rotateZ` function
  that specifies a rotation around the Z-axis
- the `rotate3d` function
  that specifies rotation around three axes

← →
↑
en ru