Course recommendation:

Página anterior A função CSS rotate()
Próxima página A função CSS rotateX()
Voltar à página anterior Manual de Função CSS

CSS rotate3d() function

Definition and usage rotate3d() CSS

rotate3d() The function defines the 3D rotation of the element. transform used in the attribute.

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)