Kurssivinkki:

CSS rotateZ() funktio

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

rotateZ() Funktio määrittää elementin 3D-kiertokulman z-akselin suhteen. transform ominaisuuksissa käytettynä.

Vinkki:rotateZ(kulma) On sama kuin rotate(kulma)。

Esimerkki

Esimerkki 1

Käytä rotateZ() Kiertä useita <div>-elementteja z-akselin ympäri:

#myDiv1 {
  transform: rotateZ(40deg);
}
#myDiv2 {
  transform: rotateZ(60deg);
}
#myDiv3 {
  transform: rotateZ(-45deg);
}

Kokeile itse

Esimerkki 2

Käytä rotateZ() Kiertä z-akselin ympäri kuvaa:

#img1 {
  transform: rotateZ(40deg);
}
#img2 {
  transform: rotateZ(60deg);
}
#img3 {
  transform: rotateZ(-45deg);
}

Kokeile itse

CSS syntaksi

rotateZ(kulma)
Arvo Kuvaus
kulma

Välttämätön. Määritä pyörimiskulma. 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 rotateY() funktio