Funkcia skewX

Funkcia skewX nastavuje skosenie prvku pozdĺž osi X, čím ho premení na rovnobežník. Používa sa spolu s vlastnosťou transform. Hodnotou vlastnosti je uhol v ľubovoľných jednotkách pre uhly. Uhol môže byť kladný aj záporný. Kladná hodnota spôsobí skosenie doľava, záporná - doprava. Skosenie sa vykonáva okolo bodu určeného vlastnosťou transform-origin.

Syntax

cssselektor {
  transform: skewX(uhol);
}

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: skewX(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: skewX(-30deg);
  border: 1px solid black;
  width: 100px;
  height: 50px;
}

Результат:

Pozrite tiež