Funkcia skew
Funkcia skew nastavuje skosenie elementu,
čím ho premení z obdĺžnika
na rovnobežník. Používa sa spoločne
s vlastnosťou transform.
Hodnotou vlastnosti je uhol v ľubovoľných jednotkách
pre uhly. Skosenie sa vykonáva okolo
bodu, ktorý je nastavený vlastnosťou transform-origin.
Môže prijať jeden alebo dva parametre, ktoré sú uvedené oddelené čiarkou. Ak sú parametre dva - prvý parameter nastavuje skosenie vodorovne a druhý - zvisle. Ak je parameter jeden - potom nastavuje skosenie vodorovne (a nie na oboch stranách). Parametre môžu byť kladné aj záporné.
Syntax
selektor {
transform: skew(jeden alebo dva uhly);
}
Príklad
V tomto príklade je blok skosený o 30
stupňov doľava:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Príklad
V tomto príklade je blok skosený o 30
stupňov doprava:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(-30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Príklad
V tomto príklade je blok skosený o 30
stupňov zvisle (kladná hodnota):
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(0deg, 30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Príklad
V tomto príklade je blok skosený o 30
stupňov zvisle (záporná hodnota):
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(0deg, -30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Príklad
Nastavíme skosenie súčasne pozdĺž osi X a Y:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(30deg, 30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
