Kurssivinkki:

CSS skewX() -funktio

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

skewX() Funktiota käytetään transform Ominaisuudessa käytettävä.

Vinkki:skewX(a) On sama kuin skew(a, 0)!

Esimerkki

Esimerkki 1

Käytä skewX() Kallista useita <div> -elementtejä annetun kulman suhteen x-akselin suhteen:

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

Kokeile itse

Esimerkki 2

Käytä skewX() Kallista kuvaa annetun kulman suhteen x-akselin suhteen:

#img1 {
  transform: skewX(25deg);
}
#img2 {
  transform: skewX(-25deg);
}
#img3 {
  transform: skewX(10deg);
}

Kokeile itse

CSS syntaksi

skewX(a)
Arvo Kuvaus
a Välttämätön. Aste. Määrittää kaltevuuden x-akselin suhteen.

Tekninen yksityiskohta

Versio: CSS Transforms Module Level 1

Selaimen tuki

Taulukon numerot ilmaisevat ensimmäisen selaimen version, joka täysin tukee tätä toimintoa.

Chrome Edge Firefox Safari Ooppera
1 12 3.5 3.1 10.5

Liittyvät sivut

Oppitunti:CSS 2D muunnos

Viittaus:CSS transform ominaisuus

Viittaus:CSS skew() funktio

Viittaus:CSS skewY() funktio