Функция skew

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

Може да приема един или два параметъра, изброени чрез запетая. Ако параметрите са два - първият параметър задава изкривяване по хоризонтала, а вторият - по вертикала. Ако параметърът е един - той задава изкривяване по хоризонтала (а не и по двете посоки). Параметрите могат да бъдат както положителни, така и отрицателни.

Синтаксис

cssселектор {
  transform: skew(един или два ъгъла);
}

Пример

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

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

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

Результат:

Пример

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

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

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

Результат:

Пример

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

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

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

Результат:

Пример

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

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

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

Результат:

Пример

Задаваме изкривяване едновременно по оси X и Y:

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

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

Результат:

Вижте също