Funkcija skew

Funkcija skew določa poševnost elementa, ga s tem spremeni iz pravokotnika v paralelogram. Uporablja se skupaj z lastnostjo transform. Vrednost lastnosti je kot v kateri koli enoti za kote. Poševnost se izvede okoli točke, določene z lastnostjo transform-origin.

Lahko sprejme en ali dva parametra, ločena z vejico. Če sta parametra dva - prvi parameter določa poševnost v vodoravni smeri, drugi pa v navpični smeri. Če je parameter en sam - potem določa poševnost v vodoravni smeri (in ne v obeh smerih). Parametri so lahko pozitivni ali negativni.

Sintaksa

cssselektor {
  transform: skew(en kot ali dva kota);
}

Primer

V tem primeru je blok poševen za 30 stopinj v levo:

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

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

Результат:

Primer

V tem primeru je blok poševen za 30 stopinj v desno:

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

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

Результат:

Primer

V tem primeru je blok poševen za 30 stopinj v navpični smeri (pozitivna vrednost):

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

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

Результат:

Primer

V tem primeru je blok poševen za 30 stopinj v navpični smeri (negativna vrednost):

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

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

Результат:

Primer

Določimo poševnost hkrati po osi X in Y:

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

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

Результат:

Glejte tudi