skew-funktio
skew-funktio asettaa elementin vinouman,
muuttaen sen siten suorakulmiosta
suunnikkaaksi. Sitä käytetään yhdessä
transform-ominaisuuden kanssa.
Ominaisuuden arvona on kulma missä tahansa kulmayksikössä. Vinoaminen tapahtuu
transform-origin-ominaisuudella määritetyn pisteen ympäri.
Voi ottaa yhden tai kaksi parametria, jotka erotetaan pilkulla. Jos parametreja on kaksi - ensimmäinen parametri asettaa vaakatasoon vinouman ja toinen - pystytasoon. Jos parametri on yksi - se asettaa vinouman vaakatasossa (ei molempiin suuntiin). Parametrit voivat olla joko positiivisia tai negatiivisia.
Syntaksi
valitsija {
transform: skew(yksi tai kaksi kulmaa);
}
Esimerkki
Tässä esimerkissä lohkoa vinotetaan 30
astetta vasemmalle:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Esimerkki
Tässä esimerkissä lohkoa vinotetaan 30
astetta oikealle:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(-30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Esimerkki
Tässä esimerkissä lohkoa vinotetaan 30
astetta pystysuunnassa (positiivinen arvo):
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(0deg, 30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Esimerkki
Tässä esimerkissä lohkoa vinotetaan 30
astetta pystysuunnassa (negatiivinen arvo):
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(0deg, -30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Esimerkki
Asetetaan vinous samanaikaisesti X- ja Y-akseleilla:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(30deg, 30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
