Функция skewX

Функцията skewX задава изкривяване на елемента по оста X, превръщайки го по този начин в успоредник. Използва се заедно със свойството transform. Стойността на свойството е ъгъл във всякакви единици за ъгли. Ъгълът може да бъде както положителен, така и отрицателен. Положителна стойност прави изкривяването наляво, отрицателна - надясно. Изкривяването се извършва около точка, зададена от свойството transform-origin.

Синтаксис

cssселектор {
  transform: skewX(ъгъл);
}

Пример

В този пример блокът е изкривен на 30 градуса наляво:

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

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

Результат:

Пример

В този пример блокът е изкривен на 30 градуса надясно:

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

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

Результат:

Вижте също