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

cssselektor {
  transform: skew(jeden alebo dva uhly);
}

Príklad

V tomto príklade je blok skosený o 30 stupňov doľava:

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

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

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

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

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

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

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

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

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

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

Результат:

Pozri tiež