Funkcija skew
Funkcija skew določa poševnost elementa,
ga s tem spremeni iz pravokotnika
v paralelogram. Uporablja se skupaj
z lastnostjo transform.
Vrednost lastnosti je kot v kateri koli enoti
za kote. Poševnost se izvede okoli
točke, določene z lastnostjo transform-origin.
Lahko sprejme en ali dva parametra, ločena z vejico. Če sta parametra dva - prvi parameter določa poševnost v vodoravni smeri, drugi pa v navpični smeri. Če je parameter en sam - potem določa poševnost v vodoravni smeri (in ne v obeh smerih). Parametri so lahko pozitivni ali negativni.
Sintaksa
selektor {
transform: skew(en kot ali dva kota);
}
Primer
V tem primeru je blok poševen za 30
stopinj v levo:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Primer
V tem primeru je blok poševen za 30
stopinj v desno:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(-30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Primer
V tem primeru je blok poševen za 30
stopinj v navpični smeri (pozitivna vrednost):
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(0deg, 30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Primer
V tem primeru je blok poševen za 30
stopinj v navpični smeri (negativna vrednost):
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(0deg, -30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Primer
Določimo poševnost hkrati po osi X in Y:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(30deg, 30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
