Функцыя 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;
}

Результат:

Глядзіце таксама