Funkcija skew
Funkcija skew nustato elemento iškrypimą,
taip paverčiant jį iš stačiakampio
į lygiagretainį. Naudojama kartu
su savybe transform.
Savybės reikšmė yra kampas bet kokiame kampų
vienetuose. Iškrypimas atliekamas aplink
tašką, nustatytą savybe transform-origin.
Gali priimti vieną ar du parametrus, išvardintus per kablelį. Jei parametrų yra du - pirmasis parametras nustato iškrypimą horizontaliai, o antrasis - vertikaliai. Jei parametras yra vienas - tai jis nustato iškrypimą horizontaliai (o ne abiem kryptimis). Parametrai gali būti teigiami arba neigiami.
Sintaksė
selektorius {
transform: skew(vienas ar du kampai);
}
Pavyzdys
Šiame pavyzdyje blokas iškrypimas 30
laipsnių kairėn:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Pavyzdys
Šiame pavyzdyje blokas iškrypimas 30
laipsnių dešinėn:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(-30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Pavyzdys
Šiame pavyzdyje blokas iškrypimas 30
laipsnių vertikaliai (teigiama reikšmė):
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(0deg, 30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Pavyzdys
Šiame pavyzdyje blokas iškrypimas 30
laipsnių vertikaliai (neigiama reikšmė):
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(0deg, -30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Pavyzdys
Nustatome iškrypimą vienu metu išilgai X ir Y ašių:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(30deg, 30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
