Функцыя skew
Функцыя skew задае скас элемента,
ператвараючы тым самым яго з прамавугольніка
ў паралелаграм. Выкарыстоўваецца сумесна
са ўласцівасцю transform.
Значэннем уласцівасці служыць кут у любых адзінках
для вуглоў. Скас ажыццяўляецца вакол
кропкі, якая задаецца ўласцівасцю transform-origin.
Можа прымаць адзін ці два параметры, якія пералічваюцца праз коску. Калі параметраў два - першы параметр задае скас па гарызанталі, а другі - па вертыкалі. Калі параметр адзін - то ён задае скас па гарызанталі (а не па абодвух баках). Параметры могуць быць як дадатнымі, так і адмоўнымі.
Сінтаксіс
селектар {
transform: skew(адзін ці два вуглы);
}
Прыклад
У гэтым прыкладзе блок скашаваны на 30
градусаў улева:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Прыклад
У гэтым прыкладзе блок скашаваны на 30
градусаў управа:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(-30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Прыклад
У гэтым прыкладзе блок скашаваны на 30
градусаў па вертыкалі (дадатнае значэнне):
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(0deg, 30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Прыклад
У гэтым прыкладзе блок скашаваны на 30
градусаў па вертыкалі (адмоўнае значэнне):
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(0deg, -30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Прыклад
Задаем скас адначасова па восі X і Y:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(30deg, 30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
