Aanbevolen cursus:

CSS rotateX() functie

Definitie en gebruik rotateX() CSS

rotateX() De functie definieert de 3D-rotatie van het element om de x-as (horizontale richting) heen. transform in de eigenschappen gebruikt.

Voorbeeld

Voorbeeld 1

Gebruik rotateX() Roteer meerdere <div>-elementen om de x-as (horizontale richting):

#myDiv1 {
  transform: rotateX(40deg);
}
#myDiv2 {
  transform: rotateX(60deg);
}
#myDiv3 {
  transform: rotateX(80deg);
}

Probeer het zelf

Voorbeeld 2

Gebruik rotateX() Roteer de afbeelding om de x-as (horizontale richting):

#img1 {
  transform: rotateX(40deg);
}
#img2 {
  transform: rotateX(60deg);
}
#img3 {
  transform: rotateX(80deg);
}

Probeer het zelf

CSS syntaxis

rotateX(hoek)
Waarde Beschrijving
hoek

Verplicht. Specificeer de rotatieweerstand. Mogelijke eenheden:

  • deg (graden)
  • rad (radianen)
  • turn (cirkel)

Technische details

Versie: CSS Transforms Module Niveau 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 rotateY() functie

Referentie:CSS rotateZ() functie