CSS rotate3d() Function
Example
Use rotate3d() to rotate several <div> elements:
#myDiv1 {
transform: rotate3d(1, 2, 1, 45deg);
}
#myDiv2 {
transform: rotate3d(0, 1, 0, 60deg);
}
#myDiv3 {
transform: rotate3d(1, 0, 0, 45deg);
}
Try it Yourself »
More "Try it Yourself" examples below.
Definition and Usage
The CSS rotate3d() function defines a 3D
rotation of an element.
The rotate3d() function is used within the
transform property.
| Version: | CSS Transforms Module Level 2 |
|---|
Browser Support
The numbers in the table specify the first browser version that fully supports the function.
| Function | |||||
|---|---|---|---|---|---|
| rotate3d() | 12 | 12 | 10 | 4 | 15 |
CSS Syntax
rotate3d(x, y, z, angle)
| Value | Description |
|---|---|
| x | A positive or negative number that defines the rotation along the x axes |
| y | A positive or negative number that defines the rotation along the y axes |
| z | A positive or negative number that defines the rotation along the z axes |
| angle | Required. Specifies the angle of rotation. Possible units:
|
More Examples
Example
Use rotate3d() to rotate images:
#img1 {
transform: rotate3d(1, 2, 1, 45deg);
}
#img2 {
transform: rotate3d(0, 1, 0, 60deg);
}
#img3 {
transform: rotate3d(1, 0, 0, 45deg);
}
Try it Yourself »
Related Pages
CSS reference: CSS transform property.
CSS reference: CSS rotate property.
CSS reference: CSS rotate() function.
CSS reference: CSS rotateX() function.
CSS reference: CSS rotateY() function.
CSS reference: CSS rotateZ() function.
CSS tutorial: CSS 3D transforms.
