Функция skewY

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

Синтаксис

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

Пример

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

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

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

Результат:

Пример

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

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

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

Результат:

Вижте също