Funktionen skew
Funktionen skew applicerar en skevning på ett element,
vilket förvandlar det från en rektangel
till ett parallellogram. Används tillsammans
med egenskapen transform.
Värdet på egenskapen är en vinkel i någon av vinkelenheterna.
Skevningen sker runt
punkten som anges av egenskapen transform-origin.
Kan ta en eller två parametrar, uppräknade separerade med kommatecken. Om det finns två parametrar - den första parametern anger skevning horisontellt, och den andra - vertikalt. Om det bara finns en parameter - så anger den skevning horisontellt (och inte i båda riktningarna). Parametrarna kan vara både positiva och negativa.
Syntax
selector {
transform: skew(ett eller två vinklar);
}
Exempel
I detta exempel är blocket skevt 30
grader åt vänster:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Exempel
I detta exempel är blocket skevt 30
grader åt höger:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(-30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Exempel
I detta exempel är blocket skevt 30
grader vertikalt (positivt värde):
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(0deg, 30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Exempel
I detta exempel är blocket skevt 30
grader vertikalt (negativt värde):
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(0deg, -30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Exempel
Applicerar skevning samtidigt längs X- och Y-axeln:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(30deg, 30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
