Funktsioon skewX

Funktsioon skewX määrab elemendi kaldenurga X-teljel, muutes selle seeläbi rööpkülikuks. Kasutatakse koos omadusega transform. Omaduse väärtuseks on nurk mis tahes nurgaühikutes. Nurk võib olla nii positiivne kui ka negatiivne. Positiivne väärtus teeb kalde vasakule, negatiivne - paremale. Kalle toimub ümber punkti, mis on määratud omadusega transform-origin.

Süntaks

cssvalija {
  transform: skewX(nurk);
}

Näide

Selles näites on plokk kaldu 30 kraadi vasakule:

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

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

Результат:

Näide

Selles näites on plokk kaldu 30 kraadi paremale:

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

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

Результат:

Vaata ka