Kurssivinkki:

CSS rotateX() -funktio

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

rotateX() Funktio määrittää elementin 3D-kierroksen x-akselin (horisontaalinen suunta) ympäri. transform Ominaisuudessa.

Esimerkki

Esimerkki 1

Käytä rotateX() Kiertä useita <div>-elementteja x-akselin (horisontaalinen suunta) ympäri:

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

Kokeile itse

Esimerkki 2

Käytä rotateX() Kiertä kuvaa x-akselin (horisontaalinen suunta) ympäri:

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

Kokeile itse

CSS syntaksi

rotateX(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 luvut 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 rotateY() funktio

Viittaus:CSS rotateZ() funktio