Функция skew

Функция skew элементни қийшиб, уни тўртбурукдан параллелограммга айлантиради. transform хусусияти билан бирга ишлатилади. Хусусиятнинг қиймати ҳар қандай бурчак ўлчов бирликларида берилади. Қийшиш transform-origin хусусияти орқали белгиланган нуқта атрофида амалга оширилади.

Битта ёки иккита параметрни қабул қилиши мумкин, параметрлар вергул билан ажратилади. Агар параметрлар иккита бўлса - биринчи параметр горизонтал бўйлаб қийшишни, иккинчиси эса вертикал бўйлаб қийшишни белгилайди. Агар параметр битта бўлса - у горизонтал бўйлаб қийшишни белгилайди (ҳар икки томонга эмас). Параметрлар мусбат ҳам, манфй ҳам бўлиши мумкин.

Синтаксис

cssселектор {
  transform: skew(бир ёки иккита бурчак);
}

Мисол

Бу мисолда блок 30 градусга чапга қийшилган:

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

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

Результат:

Мисол

Бу мисолда блок 30 градусга ўнгга қийшилган:

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

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

Результат:

Мисол

Бу мисолда блок вертикал бўйлаб 30 градусга қийшилган (мусбат қиймат):

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

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

Результат:

Мисол

Бу мисолда блок вертикал бўйлаб 30 градусга қийшилган (манфй қиймат):

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

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

Результат:

Мисол

X ва Y ўқи бўйлаб бир вақтда қийшишни белгилаш:

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

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

Результат:

Шунингдек қаранг