skewX-funktio

skewX-funktio asettaa elementin vinistymisen X-akselilla, muuttaen sen siten suunnikkaaksi. Sitä käytetään yhdessä transform-ominaisuuden kanssa. Ominaisuuden arvona on kulma missä tahansa kulmayksikössä. Kulma voi olla joko positiivinen tai negatiivinen. Positiivinen arvo aiheuttaa vinistymisen vasemmalle, negatiivinen - oikealle. Vinistys tapahtuu transform-origin-ominaisuudella asetetun pisteen ympäri.

Syntaksi

cssvalitsija {
  transform: skewX(kulma);
}

Esimerkki

Tässä esimerkissä lohkoa on vinistetty 30 astetta vasemmalle:

html<div id="elem">lorem ipsum</div>

css#elem {
  transform: skewX(30deg);
  border: 1px solid black;
  width: 100px;
  height: 50px;
}

Результат:

Esimerkki

Tässä esimerkissä lohkoa on vinistetty 30 astetta oikealle:

html<div id="elem">lorem ipsum</div>

css#elem {
  transform: skewX(-30deg);
  border: 1px solid black;
  width: 100px;
  height: 50px;
}

Результат:

Katso myös