Funkcija skew
Funkcija skew iestata elementa slīpumu,
tādējādi pārveidojot to no taisnstūra
par paralelogramu. Tiek lietota kopā
ar īpašību transform.
Īpašības vērtība ir leņķis jebkurās leņķa
mērvienībās. Slīpums tiek veikts ap
punktu, ko nosaka īpašība transform-origin.
Var pieņemt vienu vai divus parametrus, kas uzskaitīti atdalot tos ar komatu. Ja ir divi parametri - pirmais parametrs nosaka slīpumu horizontāli, bet otrais - vertikāli. Ja parametrs ir tikai viens - tas nosaka slīpumu horizontāli (nevis abos virzienos). Parametri var būt gan pozitīvi, gan negatīvi.
Sintakse
selektors {
transform: skew(vienu vai divus leņķus);
}
Piemērs
Šajā piemērā bloks ir slīpēts pa kreisi par 30
grādiem:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Piemērs
Šajā piemērā bloks ir slīpēts pa labi par 30
grādiem:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(-30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Piemērs
Šajā piemērā bloks ir slīpēts vertikāli par 30
grādiem (pozitīva vērtība):
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(0deg, 30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Piemērs
Šajā piemērā bloks ir slīpēts vertikāli par 30
grādiem (negatīva vērtība):
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(0deg, -30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Piemērs
Iestatām slīpumu vienlaicīgi pa X un Y asi:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(30deg, 30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
