Funktsiya skew

Funktsiya skew elementni qiya qilishni belgilaydi, shu orqali uni to'rtburchakdan parallelogrammga aylantiradi. transform xususiyati bilan birgalikda ishlatiladi. Xususiyat qiymati har qanday burchak birliklarida burchakdir. Qiya qilish transform-origin xususiyati bilan belgilanadigan nuqta atrofida amalga oshiriladi.

Bitta yoki ikkita parametrni qabul qilishi mumkin, ular vergul orqali ajratiladi. Agar parametrlar ikkita bo'lsa - birinchi parametr gorizontal qiyalikni belgilaydi, ikkinchisi esa vertikal qiyalikni belgilaydi. Agar parametr bitta bo'lsa - u gorizontal qiyalikni belgilaydi (har ikki tomonga emas). Parametrlar ijobiy ham, salbiy ham bo'lishi mumkin.

Sintaksis

cssselektor {
  transform: skew(bitta yoki ikkita burchak);
}

Misol

Ushbu misolda blok 30 darajaga chapga qiya qilingan:

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

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

Результат:

Misol

Ushbu misolda blok 30 darajaga o'ngga qiya qilingan:

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

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

Результат:

Misol

Ushbu misolda blok vertikal yo'nalishda 30 darajaga qiya qilingan (ijobiy qiymat):

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

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

Результат:

Misol

Ushbu misolda blok vertikal yo'nalishda 30 darajaga qiya qilingan (salbiy qiymat):

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

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

Результат:

Misol

X va Y o'qi bo'yicha bir vaqtning o'zida qiyalikni belgilaymiz:

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

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

Результат:

Shuningdek qarang