Course recommendation:

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 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)

Technical details

Version: CSS Transforms Module Level 2

Browser support

The numbers in the table represent the first browser version to fully support this function.

Chrome Edge Firefox Safari Opera
12 12 10 4 15

Related pages

Tutorial:Transformacje 3D w CSS

Referencje:Atrybut transform w CSS

Referencje:Atrybut rotate w CSS

Referencje:Funkcja rotate() w CSS

Referencje:Funkcja rotateX() w CSS

Referencje:Funkcja rotateY() w CSS

Referencje:Funkcja rotateZ() w CSS