Kurssivinkki:

CSS rotateY() -funktio

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

rotateY() Funktio määrittää elementin 3D-kiertorotoinnin y-akselin (pystysuuntainen) suuntaan. transform Ominaisuudessa.

Esimerkki

Esimerkki 1

Käytä rotateY() Kiertä useita <div>-elementtejä y-akselin (pystysuuntainen) suuntaan:

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

Kokeile itse

Esimerkki 2

Käytä rotateY() Kiertä y-akselin (pystysuuntainen) suuntaan kuvaa:

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

Kokeile itse

CSS syntaksi

rotateY(kulma)
Arvo Kuvaus
kulma

Välttämätön. Määritä pyörimisaste. Mahdolliset yksiköt:

  • deg（aste)
  • rad（arkki)
  • turn（pyörähdys）

Tekninen yksityiskohta

Versio: CSS Transforms Module Level 2

Selaimen tuki

Taulukossa olevat numerot ilmaisevat ensimmäisen selaimen version, joka täysin tukee tätä funktiota.

Chrome Edge Firefox Safari Opera
12 12 10 4 15

Liittyvät sivut

Oppitunti:CSS 3D muunnokset

Viittaus:CSS transform ominaisuus

Viittaus:CSS rotate ominaisuus

Viittaus:CSS rotate() funktio

Viittaus:CSS rotate3d() funktio

Viittaus:CSS rotateX() funktio

Viittaus:CSS rotateZ() funktio