De skew-functie
De functie skew bepaalt de scheefheid van een element,
waardoor het van een rechthoek
in een parallellogram verandert. Wordt gebruikt in combinatie
met de eigenschap transform.
De waarde van de eigenschap is een hoek in elke hoekeenheid.
De scheefheid wordt uitgevoerd rondom
het punt dat wordt bepaald door de eigenschap transform-origin.
Kan één of twee parameters accepteren, gescheiden door een komma. Als er twee parameters zijn - bepaalt de eerste parameter de scheefheid horizontaal, en de tweede - verticaal. Als er één parameter is - dan bepaalt deze de scheefheid horizontaal (en niet aan beide kanten). Parameters kunnen zowel positief als negatief zijn.
Syntaxis
selector {
transform: skew(één of twee hoeken);
}
Voorbeeld
In dit voorbeeld is het blok 30
graden naar links gekanteld:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Voorbeeld
In dit voorbeeld is het blok 30
graden naar rechts gekanteld:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(-30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Voorbeeld
In dit voorbeeld is het blok 30
graden verticaal gekanteld (positieve waarde):
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(0deg, 30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Voorbeeld
In dit voorbeeld is het blok 30
graden verticaal gekanteld (negatieve waarde):
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(0deg, -30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Voorbeeld
Bepaal de scheefheid simultaan langs de X- en Y-as:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(30deg, 30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
