Funkcija skew

Funkcija skew zadaje iskošavanje elementa, pretvarajući ga iz pravougaonika u paralelogram. Koristi se zajedno sa svojstvom transform. Vrednošću svojstva služi ugao u bilo kojim jedinicama za uglove. Iskošavanje se vrši oko tačke, zadate svojstvom transform-origin.

Može prihvatiti jedan ili dva parametra, nabrojana preko zapete. Ako su parametri dva - prvi parametar zadaje iskošavanje po horizontali, a drugi - po vertikali. Ako je parametar jedan - onda on zadaje iskošavanje po horizontali (a ne po obe strane). Parametri mogu biti pozitivni, tako i negativni.

Sintaksa

cssselektor {
  transform: skew(jedan ili dva ugla);
}

Primer

U ovom primeru blok je iskošen za 30 stepeni ulevo:

html<div id="elem">lorem ipsum</div>

css#elem {
  transform: skew(30deg);
  border: 1px solid black;
  width: 100px;
  height: 50px;
}

Результат:

Primer

U ovom primeru blok je iskošen za 30 stepeni udesno:

html<div id="elem">lorem ipsum</div>

css#elem {
  transform: skew(-30deg);
  border: 1px solid black;
  width: 100px;
  height: 50px;
}

Результат:

Primer

U ovom primeru blok je iskošen za 30 stepeni po vertikali (pozitivna vrednost):

html<div id="elem">lorem ipsum</div>

css#elem {
  transform: skew(0deg, 30deg);
  border: 1px solid black;
  width: 100px;
  height: 50px;
}

Результат:

Primer

U ovom primeru blok je iskošen za 30 stepeni po vertikali (negativna vrednost):

html<div id="elem">lorem ipsum</div>

css#elem {
  transform: skew(0deg, -30deg);
  border: 1px solid black;
  width: 100px;
  height: 50px;
}

Результат:

Primer

Zadajemo iskošavanje istovremeno po X i Y osi:

html<div id="elem">lorem ipsum</div>

css#elem {
  transform: skew(30deg, 30deg);
  border: 1px solid black;
  width: 100px;
  height: 50px;
}

Результат:

Pogledajte takođe