Funksjonen skew
Funksjonen skew setter skjevheten til et element,
og forvandler det dermed fra et rektangel
til et parallellogram. Brukes sammen
med egenskapen transform.
Verdien til egenskapen er en vinkel i alle vinkelenheter.
Skjevheten utføres rundt
punktet som er satt av egenskapen transform-origin.
Kan ta én eller to parametre, opplistet med komma. Hvis det er to parametere - den første parameteren setter skjevheten horisontalt, og den andre - vertikalt. Hvis det er én parameter - så setter den skjevheten horisontalt (og ikke i begge retninger). Parameterne kan være både positive og negative.
Syntaks
velger {
transform: skew(én eller to vinkler);
}
Eksempel
I dette eksemplet er boksen skjevstilt med 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 eksemplet er boksen skjevstilt med 30
grader til høyre:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(-30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Eksempel
I dette eksemplet er boksen skjevstilt med 30
grader vertikalt (positiv verdi):
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(0deg, 30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Eksempel
I dette eksemplet er boksen skjevstilt med 30
grader vertikalt (negativ verdi):
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(0deg, -30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Eksempel
Setter skjevhet samtidig langs X- og Y-aksen:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(30deg, 30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
