Funkce skew
Funkce skew nastavuje zkosení prvku,
čímž jej mění z obdélníku
na rovnoběžník. Používá se společně
s vlastností transform.
Hodnotou vlastnosti je úhel v libovolných jednotkách
pro úhly. Zkosení se provádí kolem
bodu nastaveného vlastností transform-origin.
Může přijímat jeden nebo dva parametry, oddělené čárkou. Pokud jsou parametry dva - první parametr nastavuje zkosení vodorovně a druhý - svisle. Pokud je parametr jeden - pak nastavuje zkosení vodorovně (a ne na obou stranách). Parametry mohou být kladné i záporné.
Syntaxe
selektor {
transform: skew(jeden nebo dva úhly);
}
Příklad
V tomto příkladu je blok zkosen o 30
stupňů doleva:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Příklad
V tomto příkladu je blok zkosen o 30
stupňů doprava:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(-30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Příklad
V tomto příkladu je blok zkosen o 30
stupňů svisle (kladná hodnota):
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(0deg, 30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Příklad
V tomto příkladu je blok zkosen o 30
stupňů svisle (záporná hodnota):
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(0deg, -30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Příklad
Nastavíme zkosení současně podél osy X a Y:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(30deg, 30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
