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