Funktionen skew
Funktionen skew anvender en skråstilling på et element,
hvilket forvandler det fra et rektangel
til et parallelogram. Den bruges sammen
med egenskaben transform.
Værdien for egenskaben er en vinkel i enhver vinkelenhed. Skråstillingen udføres omkring
punktet, der er angivet af egenskaben transform-origin.
Kan tage en eller to parametre, adskilt af komma. Hvis der er to parametre - angiver den første parameter skråstillingen horisontalt, og den anden - vertikalt. Hvis der kun er én parameter - angiver den skråstillingen horisontalt (og ikke på begge akser). Parametre kan være både positive og negative.
Syntaks
selektor {
transform: skew(én eller to vinkler);
}
Eksempel
I dette eksempel er blokken skråstillet 30
grader til venstre:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Eksempel
I dette eksempel er blokken skråstillet 30
grader til højre:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(-30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Eksempel
I dette eksempel er blokken skråstillet 30
grader vertikalt (positiv værdi):
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(0deg, 30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Eksempel
I dette eksempel er blokken skråstillet 30
grader vertikalt (negativ værdi):
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(0deg, -30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Eksempel
Anvend skråstilling på både X- og Y-aksen samtidig:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(30deg, 30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
