CSS rotate3d() function

Previous Page CSS rotate() function
Next Page CSS rotateX() function
Go to the Previous Level CSS Function Reference Manual

Definition and usage

CSS rotate3d() The function defines the 3D rotation of the element.

rotate3d() Function in transform used in properties.

Instance

Example 1

Using rotate3d() Rotate multiple <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

Example 2

Using rotate3d() Rotate image:

#img1 {
  transform: rotate3d(1, 2, 1, 45deg);
}
#img2 {
  transform: rotate3d(0, 1, 0, 60deg);
}
#img3 {
  transform: rotate3d(1, 0, 0, 45deg);
}

Try it yourself

CSS syntax

rotate3d(x, y, z, angle)

Value	Description
x	Positive or negative, defines the rotation along the x-axis.
y	Positive or negative, defines the rotation along the y-axis.
z	Positive or negative, defines the rotation along the z-axis.
angle	Required. Specify the rotation angle. Possible units: deg (degrees) rad (radians) turn (circle)