Course recommendation:

Föregående sida CSS rotate() funktion
Nästa sida CSS rotateX() funktion
Gå tillbaka till föregående nivå CSS function reference manual

CSS rotate3d() function

Definition and usage rotate3d() CSS

rotate3d() The function defines the 3D rotation of the element. 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 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

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)