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

cssselektor {
  transform: skew(jeden nebo dva úhly);
}

Příklad

V tomto příkladu je blok zkosen o 30 stupňů doleva:

html<div id="elem">lorem ipsum</div>

css#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:

html<div id="elem">lorem ipsum</div>

css#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):

html<div id="elem">lorem ipsum</div>

css#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):

html<div id="elem">lorem ipsum</div>

css#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:

html<div id="elem">lorem ipsum</div>

css#elem {
  transform: skew(30deg, 30deg);
  border: 1px solid black;
  width: 100px;
  height: 50px;
}

Результат:

Viz také