skewY-funktio

skewY-funktio asettaa elementin vinostuksen Y-akselin suunnassa, muuttaen sen suunnikkaaksi. Sitä käytetään yhdessä transform-ominaisuuden kanssa. Ominaisuuden arvona käytetään kulmaa missä tahansa kulmayksikössä. Kulma voi olla sekä positiivinen että negatiivinen. Positiivinen arvo vinostaa elementtiä ylöspäin, negatiivinen - alaspäin. Vinostus suoritetaan transform-origin-ominaisuudella asetetun pisteen ympäri.

Syntaksi

cssvalitsija {
  transform: skewY(kulma);
}

Esimerkki

Tässä esimerkissä lohkoa on vinostettu 30 astetta ylöspäin:

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

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

Результат:

Esimerkki

Tässä esimerkissä lohkoa on vinostettu 30 astetta alaspäin:

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

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

Результат:

Katso myös