Die skew-funksie
Die funksie skew stel die skeef trek van 'n element,
en verander dit sodoende van 'n reghoek
na 'n parallelogram. Dit word saam gebruik
met die eienskap transform.
Die waarde van die eienskap is 'n hoek in enige eenhede
vir hoeke. Die skeef trek word gedoen om
die punt wat deur die eienskap transform-origin gestel is.
Dit kan een of twee parameters aanvaar, geskei deur 'n komma. As daar twee parameters is - die eerste parameter stel die skeef trek horisontaal, en die tweede - vertikaal. As daar slegs een parameter is - dan stel dit die skeef trek horisontaal (en nie albei kante nie). Parameters kan óf positief, óf negatief wees.
Sintaksis
selektor {
transform: skew(een of twee hoeke);
}
Voorbeeld
In hierdie voorbeeld is die blok 30
grade na links geskeef getrek:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Voorbeeld
In hierdie voorbeeld is die blok 30
grade na regs geskeef getrek:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(-30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Voorbeeld
In hierdie voorbeeld is die blok 30
grade vertikaal geskeef getrek (positiewe waarde):
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(0deg, 30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Voorbeeld
In hierdie voorbeeld is die blok 30
grade vertikaal geskeef getrek (negatiewe waarde):
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(0deg, -30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Voorbeeld
Stel skeef trek gelyktydig op die X- en Y-as:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(30deg, 30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
