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

Результат:

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