Kurssiesimerkki:

CSS skewY() -funktio

Määrittely ja käyttö skewY() CSS:n

skewY() Funktio käytetään elementin vinouttamiseen annetulla kulmalla y-akselin suhteen. transform Määritellään ominaisuudessa.

Esimerkki

Esimerkki 1

Käytä skewY() Kallista useita <div>-elementteja annetulla kulmalla y-akselin suhteen:

#myDiv1 {
  transform: skewY(15deg);
}
#myDiv2 {
  transform: skewY(30deg);
}
#myDiv3 {
  transform: skewY(-25deg);
}

Kokeile itse

Esimerkki 2

Käytä skewY() Kallista kuvaa annetulla kulmalla y-akselin suhteen:

#img1 {
  transform: skewY(10deg);
}
#img2 {
  transform: skewY(-10deg);
}
#img3 {
  transform: skewY(5deg);
}

Kokeile itse

CSS syntax

skewY(a)
Arvo Kuvaus
a Välttämätön. Aste. Määrittää vinoutumisen y-akselin suhteen.

Tekninen yksityiskohta

Versio: CSS Transforms Module Level 1

Selaimen tuki

Taulukon numerot viittaavat ensimmäiseen versioon, joka täysin tukee tätä funktiota.

Chrome Edge Firefox Safari Opera
1 12 3.5 3.1 10.5

Aiheeseen liittyvät sivut

Oppitunnit:CSS 2D muunnos

Viittaukset:CSS transform ominaisuus

Viittaukset:CSS skew() funktio

Viittaukset:CSS skewX() funktio