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

Результат:

Погледнете ги исто така