skewX funktsiyasi

skewX funktsiyasi elementni X o‘qi bo‘yicha qiyshaytiradi va shu orqali uni parallelogrammga aylantiradi. transform xususiyati bilan birgalikda ishlatiladi. Xususiyat qiymati ixtiyoriy burchak o‘lchov birliklarida ifodalangan burchakdir. Burchak musbat ham, manfiy ham bo‘lishi mumkin. Musbat qiymat chapga qiyshaytirishni, manfiy qiymat esa o‘ngga qiyshaytirishni amalga oshiradi. Qiyshaytirish transform-origin xususiyati bilan belgilanadigan nuqta atrofida amalga oshiriladi.

Sintaksis

cssselector {
  transform: skewX(burchak);
}

Misol

Ushbu misolda blok 30 gradusga chapga qiyshaytirilgan:

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

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

Результат:

Misol

Ushbu misolda blok 30 gradusga o‘ngga qiyshaytirilgan:

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

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

Результат:

Shuningdek qarang