Funkcija skewX

Funkcija skewX nustato elemento iškraipymą išilgai X ašies, taip paverčiant jį į paralelogramą. Naudojama kartu su savybe transform. Savybės reikšmė yra kampas bet kuriame kampo vienetuose. Kampas gali būti ir teigiamas, ir neigiamas. Teigiama reikšmė sukelia iškraipymą į kairę, neigiama - į dešinę. Iškraipymas atliekamas aplink tašką, nustatytą savybės transform-origin.

Sintaksė

cssselektorius {
  transform: skewX(kampas);
}

Pavyzdys

Šiame pavyzdyje blokas iškraipytas 30 laipsnių kairėn:

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

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

Результат:

Pavyzdys

Šiame pavyzdyje blokas iškraipytas 30 laipsnių dešinėn:

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

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

Результат:

Taip pat žiūrėkite