A skew függvény
A skew függvény egy elem ferdeségét állítja be,
ezzel téglalapból paralelogrammává alakítva azt. A
transform
tulajdonsággal együtt használható. Az értéke bármilyen
szövegységben
megadott szög. A ferdesítés a
transform-origin
tulajdonsággal megadott pont körül történik.
Egy vagy két, vesszővel elválasztott paramétert fogadhat. Ha két paraméter van - az első paraméter a vízszintes, a második a függőleges ferdeséget határozza meg. Ha csak egy paraméter van - akkor az a vízszintes ferdeséget határozza meg (nem mindkét irányt). A paraméterek lehetnek pozitívak vagy negatívak is.
Szintaxis
szelektor {
transform: skew(egy vagy két szög);
}
Példa
Ebben a példában a blokk 30 fokkal
balra ferde:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Példa
Ebben a példában a blokk 30 fokkal
jobbra ferde:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(-30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Példa
Ebben a példában a blokk 30 fokkal
függőlegesen ferde (pozitív érték):
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(0deg, 30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Példa
Ebben a példában a blokk 30 fokkal
függőlegesen ferde (negatív érték):
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(0deg, -30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Példa
Ferdeség beállítása egyszerre X és Y tengely mentén:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(30deg, 30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
