Funktsioon skew
Funktsioon skew määrab elemendi kaldumise,
muutes selle seeläbi ristkülikust
rööpkülikuks. Kasutatakse koos
omadusega transform.
Omaduse väärtuseks on nurk mis tahes nurgaühikutes. Kaldumine toimub ümber
punkti, mis on määratud omadusega transform-origin.
Võib võtta ühe või kaks parameetrit, mis loetletakse koma abil. Kui parameetreid on kaks - esimene parameeter määrab kaldumise horisontaalselt ja teine - vertikaalselt. Kui parameeter on üks - siis see määrab kaldumise horisontaalselt (mitte mõlemas suunas). Parameetrid võivad olla nii positiivsed kui ka negatiivsed.
Süntaks
valija {
transform: skew(üks või kaks nurka);
}
Näide
Selles näites on plokk kaldutatud 30
kraadi vasakule:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Näide
Selles näites on plokk kaldutatud 30
kraadi paremale:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(-30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Näide
Selles näites on plokk kaldutatud 30
kraadi vertikaalselt (positiivne väärtus):
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(0deg, 30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Näide
Selles näites on plokk kaldutatud 30
kraadi vertikaalselt (negatiivne väärtus):
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(0deg, -30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Näide
Määrame kaldumise samaaegselt mööda X- ja Y-telge:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(30deg, 30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
