Aanbevolen cursus:

CSS rotateZ() functie

Definitie en gebruik rotateZ() CSS

rotateZ() De functie definieert een 3D-rotatie van een element om de z-as. transform Gebruik in eigenschappen.

Tip:rotateZ(hoek) Gelijk aan rotate(hoek).

Voorbeeld

Voorbeeld 1

Gebruik rotateZ() Roteer meerdere <div>-elementen om de z-as heen:

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

Probeer het zelf

Voorbeeld 2

Gebruik rotateZ() Roteer de afbeelding om de z-as heen:

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

Probeer het zelf

CSS syntaxis

rotateZ(hoek)
Waarde Beschrijving
hoek

Verplicht. Specificeer de hoek van de rotatie. Mogelijke eenheden:

  • deg（graad）
  • rad（radij）
  • turn（kring）

Technische details

Versie: CSS Transforms Module Level 2

Browserondersteuning

De cijfers in de tabel geven de browserversie aan die de functie volledig ondersteunt.

Chrome Edge Firefox Safari Opera
12 12 10 4 15

Gerelateerde pagina's

Handleiding:CSS 3D transformatie

Referentie:CSS transform eigenschap

Referentie:CSS rotate eigenschap

Referentie:CSS rotate() functie

Referentie:CSS rotate3d() functie

Referentie:CSS rotateX() functie

Referentie:CSS rotateY() functie