Aanbevolen cursus:

Vorige pagina CSS rotate() functie
Volgende pagina CSS rotateX() functie
Terug naar de vorige laag CSS Functie Referentiemanual

CSS rotate3d() functie

Definitie en gebruik rotate3d() CSS

rotate3d() De functie definieert de 3D-rotatie van het element. transform in eigenschappen gebruikt.

Voorbeeld

Voorbeeld 1

Gebruik rotate3d() Roteer meerdere <div>-elementen:

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

Probeer het zelf

Voorbeeld 2

Gebruik rotate3d() Beeld roteren:

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

Probeer het zelf

CSS syntaxis

rotate3d(x, y, z, angle)

Waarde	Beschrijving
x	Positief of negatief, definieert de rotatie langs de x-as.
y	Positief of negatief, definieert de rotatie langs de y-as.
z	Positief of negatief, definieert de rotatie langs de z-as.
angle	Verplicht. Specificeer de hoek van de rotatie. Mogelijke eenheden: deg（graden） rad（radianen） turn（cirkel）