# rotate3d()

## Summary

Defines a three-dimensional rotation transformation by first defining the axis of rotation as an (x,y,z) vector and then defining the angle to rotate the element around this axis. Requires four parameters: the first three are unitless numbers defining the axis vector, and the fourth is an angle measurement (specifying degrees or radians).

## Examples

The following code snippet is an example of the **rotate3d** function in use. When applied to a square blue **div** element, it has the effect illustrated in the image. (The light-blue square indicates the original position of the transformed element.)

```
div {
transform: rotate3d(0.7, 0.5, 0.7, 45deg);
}
```

## Notes

### Remarks

The element rotates by the angle specified in the last parameter, and about the [*x*,*y*,*z*] direction vector described by the first three parameters. If the direction vector is not of unit length, it will be normalized. A direction vector that cannot be normalized, such as [0, 0, 0], results in no rotation.

### Syntax

**rotate3d** `( <number> , <number> , <number> , <angle> )`

### Parameters

*number*- A component of the direction vector about which the element is rotated.

*angle* - The angle by which the element is rotated. This value is expressed as a number followed by a supported angle unit.

### Standards information

- CSS Transforms Module, Level 3, Section 13.2

## See also

### Related articles

#### Transforms

**rotate3d()**

### Related pages

`Transform Functions`

- Mathematical Description of Transform FunctionsMathematical Description of Transform Functions
`Direct3D: Matrices`

- Hands On: 3-D TransformsHands On: 3-D Transforms

### Related pages

- 3D and CSS3D and CSS

## Attributions

Microsoft Developer Network: [Windows Internet Explorer API reference Article]

Portions of this content come from HTML5Rocks! article