Funkcija skewX

Funkcija skewX iestata elementa slīpēšanu pa X asi, pārvēršot to paralelogramā. Izmanto kopā ar īpašību transform. Īpašības vērtība ir leņķis jebkurās leņķa mērvienībās. Leņķis var būt gan pozitīvs, gan negatīvs. Pozitīva vērtība rada slīpēšanu pa kreisi, negatīva - pa labi. Slīpēšana notiek ap punktu, ko nosaka īpašība transform-origin.

Sintakse

cssselektors {
  transform: skewX(leņķis);
}

Piemērs

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

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

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

Результат:

Piemērs

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

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

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

Результат:

Skatiet arī