Funkcija skewX

Funkcija skewX zadaje iskošenje elementa duž X ose, pretvarajući ga time u paralelogram. Koristi se zajedno sa svojstvom transform. Vrednost svojstva je ugao u bilo kojim jedinicama za uglove. Ugao može biti i pozitivan, i negativan. Pozitivna vrednost čini iskošenje ulevo, negativna - udesno. Iskošenje se vrši oko tačke zadate svojstvom transform-origin.

Sintaksa

cssselektor {
  transform: skewX(ugao);
}

Primer

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

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

css#elem {
  transform: skewX(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: skewX(-30deg);
  border: 1px solid black;
  width: 100px;
  height: 50px;
}

Результат:

Pogledajte takođe