Функцијата 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;
}
: