CSS rotate() functie

Definitie en gebruik

CSS rotate() definieert de 2D rotering van het element.

rotate() De functie in transform Gebruik in eigenschappen.

Voorbeeld

Voorbeeld 1

Gebruik rotate() Roteer meerdere <div> elementen:

#myDiv1 {
  transform: rotate(25deg);
}
#myDiv2 {
  transform: rotate(45deg);
}
#myDiv3 {
  transform: rotate(-45deg);
}

Probeer het zelf

Voorbeeld 2

Gebruik rotate() Roteer beeld:

#img1 {
  transform: rotate(90deg);
}
#img2 {
  transform: rotate(45deg);
}
#img3 {
  transform: rotate(-45deg);
}

Probeer het zelf

CSS syntaxis

rotate(hoek)
Waarde Beschrijving
hoek

Verplicht. Specificeer de hoek van rotering. Mogelijke eenheden:

  • deg (graad)
  • rad (boog)
  • turn (kring)

Technische details

Versie: CSS Transforms Module Level 1

Browserondersteuning

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

Chrome Edge Firefox Safari Opera
1 12 3.5 3.1 10.5

Gerelateerde pagina's

Handleiding:CSS 2D transformaties

Referentie:CSS transform eigenschap

Referentie:CSS rotate eigenschap

Referentie:CSS rotate3d() functie

Referentie:CSS rotateX() functie

Referentie:CSS rotateY() functie

Referentie:CSS rotateZ() functie