Kursrekommendationer：

CSS rotateZ() funktion

Definition och användning rotateZ() CSS

rotateZ() Funktionen definierar en 3D-rotation av ett element runt z-axeln. transform Använd i egenskapsvärden.

Tips：rotateZ(angle) Ekvivalent med rotate(angle)。

Exempel

Exempel 1

Använd rotateZ() Rotera flera <div>-element runt z-axeln：

#myDiv1 {
  transform: rotateZ(40deg);
}
#myDiv2 {
  transform: rotateZ(60deg);
}
#myDiv3 {
  transform: rotateZ(-45deg);
}

Prova själv

Exempel 2

Använd rotateZ() Rotera bilden runt z-axeln：

#img1 {
  transform: rotateZ(40deg);
}
#img2 {
  transform: rotateZ(60deg);
}
#img3 {
  transform: rotateZ(-45deg);
}

Prova själv

CSS syntax

rotateZ(angle)
Värde Beskrivning
angle

Obligatorisk. Ange rotationsvinkeln. Möjliga enheter：

  • deg（grader）
  • rad（båg）
  • turn（omvändning）

Tekniska detaljer

Version： CSS Transforms Module Level 2

Webbläsarstöd

Talen i tabellen representerar den första webbläsareversion som fullständigt stöder denna funktion.

Chrome Edge Firefox Safari Opera
12 12 10 4 15

relaterade sidor

教程：CSS 3D transformation

Referens:CSS transform egenskap

Referens:CSS rotate egenskap

Referens:CSS rotate() funktion

Referens:CSS rotate3d() funktion

Referens:CSS rotateX() funktion

Referens:CSS rotateY() funktion