Kurssin suositukset:

Edellinen sivu CSS rotate() funktio
Seuraava sivu CSS rotateX() funktio
Palaa yhdellä tasolla ylös CSS funktioviittausopas

CSS rotate3d() -funktio

Määrittely ja käyttö rotate3d() CSS

rotate3d() Funktio määrittää elementin 3D-kääntymisen. transform Käytetään ominaisuuden määrittelyssä.

Esimerkki

Esimerkki 1

Käytä rotate3d() Käännä useita <div>-elementtejä:

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

Kokeile itse

Esimerkki 2

Käytä rotate3d() Käännä kuvaa:

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

Kokeile itse

CSS syntaksi

rotate3d(x, y, z, kulma)

Arvo	Kuvaus
x	Luku, positiivinen tai negatiivinen, määrittää pyörimisen x-akselin suuntaan.
y	Luku, positiivinen tai negatiivinen, määrittää pyörimisen y-akselin suuntaan.
z	Luku, positiivinen tai negatiivinen, määrittää pyörimisen z-akselin suuntaan.
kulma	Välttämätön. Määritä pyörimiskulma. Mahdolliset yksiköt: deg（aste) rad（arkki) turn（pyörähdys)