# rotate3d()

Функция CSS rotate3d() трансформирует элемент без деформации, вращая его в трёхмерном пространстве вокруг зафиксированной оси. Её результатом является тип <transform-function> (en-US).

## Интерактивный пример

In 3D space, rotations have three degrees of liberty, which together describe a single axis of rotation. The axis of rotation is defined by an [x, y, z] vector and pass by the origin (as defined by the transform-origin (en-US) property). If, as specified, the vector is not normalized (i.e., if the sum of the square of its three coordinates is not 1), the user agent will normalize it internally. A non-normalizable vector, such as the null vector, [0, 0, 0], will cause the rotation to be ignored, but without invaliding the whole CSS property.

Примечание: 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 rotate3d() is specified by three <number>s and one <angle>. The <number>s represent the x-, y-, and z-coordinates of the vector denoting the axis of rotation. The <angle> represents the angle of rotation; if positive, the movement will be clockwise; if negative, it will be counter-clockwise.

rotate3d(x, y, z, a)


### Values

x

Is a <number> describing the x-coordinate of the vector denoting the axis of rotation which could between 0 and 1.

y

Is a <number> describing the y-coordinate of the vector denoting the axis of rotation which could between 0 and 1.

z

Is a <number> describing the z-coordinate of the vector denoting the axis of rotation which could between 0 and 1.

a

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

## Examples

### Rotating on the y-axis

#### HTML

html

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


#### CSS

css

body {
perspective: 800px;
}

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

.rotated {
transform: rotate3d(0, 1, 0, 60deg);
background-color: pink;
}


### Rotating on a custom axis

#### HTML

html

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


#### CSS

css

body {
perspective: 800px;
}

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

.rotated {
transform: rotate3d(1, 2, -1, 192deg);
background-color: pink;
}


## Browser compatibility

Please see the <transform-function> (en-US) data type for compatibility info.