# rotate3d function

The `rotate3d` function sets a rotation of an element by a given angle simultaneously relative to the X-, Y-, Z-axis in three-dimensional space. It is used together with the `transform` property. The property value is an angle in any angle units.

The function takes `4` parameters as values, written separated by commas. The first three parameters define the vector of the axis in three-dimensional space, relative to which the rotation will be performed. The fourth parameter specifies the rotation angle.

## Syntax

`selector { transform: rotate3d(X, Y, Z, angle); }`

## Example

In this example, the axis vector will point to the upper right corner of the screen:

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

:

## See also

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

← →
↑
en ru