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
valitsija {
transform: skewY(kulma);
}
Esimerkki
Tässä esimerkissä lohkoa on vinostettu 30
astetta ylöspäin:
<div id="elem">lorem ipsum</div>
#elem {
transform: skewY(30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Esimerkki
Tässä esimerkissä lohkoa on vinostettu 30
astetta alaspäin:
<div id="elem">lorem ipsum</div>
#elem {
transform: skewY(-30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
