Kursusanbefaling:

CSS rotate3d() funktion

Definition og brug rotate3d() CSS

rotate3d() Funktionen definerer elementets 3D-rotation. transform brugt i egenskaber.

Eksempel

Eksempel 1

Brug rotate3d() Roter flere <div>-elementer:

#myDiv1 {
  transform: rotate3d(1, 2, 1, 45deg);
}
#myDiv2 {
  transform: rotate3d(0, 1, 0, 60deg);
}
#myDiv3 {
  transform: rotate3d(1, 0, 0, 45deg);
}

Prøv det selv

Eksempel 2

Brug rotate3d() Roter billedet:

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

Prøv det selv

CSS syntaks

rotate3d(x, y, z, angle)
Værdi Beskrivelse
x Positiv eller negativ, definerer rotation langs x-aksen.
y Positiv eller negativ, definerer rotation langs y-aksen.
z Positiv eller negativ, definerer rotation langs z-aksen.
angle

Obligatorisk. Angiv roteringsvinklen. Mulige enheder:

  • deg（度）
  • rad（弧度）
  • turn（圈）

Tekniske detaljer

Version: CSS Transforms Module Level 2

Browserunderstøttelse

Tabelens tal angiver den første browserversion, der fuldt ud understøtter denne funktion.

Chrome Edge Firefox Safari Opera
12 12 10 4 15

Relaterede sider

Tilvejebringselsesvejledning:CSS 3D transformation

Reference:CSS transform egenskab

Reference:CSS rotate egenskab

Reference:CSS rotate() funktion

Reference:CSS rotateX() funktion

Reference:CSS rotateY() funktion

Reference:CSS rotateZ() funktion