Funcția skew

Funcția skew definește înclinarea unui element, transformându-l astfel dintr-un dreptunghi într-un paralelogram. Este utilizată împreună cu proprietatea transform. Valoarea proprietății este un unghi în orice unitate de măsură pentru unghiuri. Înclinarea este efectuată în jurul punctului specificat de proprietatea transform-origin.

Poate accepta unul sau doi parametri, enumerați separati prin virgulă. Dacă există doi parametri - primul parametru definește înclinarea orizontală, iar al doilea - cea verticală. Dacă există un singur parametru - acesta definește înclinarea orizontală (și nu pe ambele dimensiuni). Parametrii pot fi atât pozitivi, cât și negativi.

Sintaxă

cssselector {
  transform: skew(unul sau două unghiuri);
}

Exemplu

În acest exemplu, blocul este înclinat la 30 grade spre stânga:

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

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

Результат:

Exemplu

În acest exemplu, blocul este înclinat la 30 grade spre dreapta:

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

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

Результат:

Exemplu

În acest exemplu, blocul este înclinat la 30 grade pe verticală (valoare pozitivă):

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

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

Результат:

Exemplu

În acest exemplu, blocul este înclinat la 30 grade pe verticală (valoare negativă):

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

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

Результат:

Exemplu

Definim înclinarea simultan pe axa X și Y:

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

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

Результат:

Vezi și