Funkcija skew

Funkcija skew iestata elementa slīpumu, tādējādi pārveidojot to no taisnstūra par paralelogramu. Tiek lietota kopā ar īpašību transform. Īpašības vērtība ir leņķis jebkurās leņķa mērvienībās. Slīpums tiek veikts ap punktu, ko nosaka īpašība transform-origin.

Var pieņemt vienu vai divus parametrus, kas uzskaitīti atdalot tos ar komatu. Ja ir divi parametri - pirmais parametrs nosaka slīpumu horizontāli, bet otrais - vertikāli. Ja parametrs ir tikai viens - tas nosaka slīpumu horizontāli (nevis abos virzienos). Parametri var būt gan pozitīvi, gan negatīvi.

Sintakse

cssselektors {
  transform: skew(vienu vai divus leņķus);
}

Piemērs

Šajā piemērā bloks ir slīpēts pa kreisi par 30 grādiem:

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

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

Результат:

Piemērs

Šajā piemērā bloks ir slīpēts pa labi par 30 grādiem:

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

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

Результат:

Piemērs

Šajā piemērā bloks ir slīpēts vertikāli par 30 grādiem (pozitīva vērtība):

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

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

Результат:

Piemērs

Šajā piemērā bloks ir slīpēts vertikāli par 30 grādiem (negatīva vērtība):

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

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

Результат:

Piemērs

Iestatām slīpumu vienlaicīgi pa X un Y asi:

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

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

Результат:

Skatiet arī