Функция skew
Функция skew элементни қийшиб,
уни тўртбурукдан параллелограммга
айлантиради. transform
хусусияти билан бирга ишлатилади.
Хусусиятнинг қиймати ҳар қандай бурчак ўлчов бирликларида
берилади. Қийшиш transform-origin
хусусияти орқали белгиланган нуқта атрофида амалга оширилади.
Битта ёки иккита параметрни қабул қилиши мумкин, параметрлар вергул билан ажратилади. Агар параметрлар иккита бўлса - биринчи параметр горизонтал бўйлаб қийшишни, иккинчиси эса вертикал бўйлаб қийшишни белгилайди. Агар параметр битта бўлса - у горизонтал бўйлаб қийшишни белгилайди (ҳар икки томонга эмас). Параметрлар мусбат ҳам, манфй ҳам бўлиши мумкин.
Синтаксис
селектор {
transform: skew(бир ёки иккита бурчак);
}
Мисол
Бу мисолда блок 30
градусга чапга қийшилган:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Мисол
Бу мисолда блок 30
градусга ўнгга қийшилган:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(-30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Мисол
Бу мисолда блок вертикал бўйлаб 30
градусга қийшилган (мусбат қиймат):
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(0deg, 30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Мисол
Бу мисолда блок вертикал бўйлаб 30
градусга қийшилган (манфй қиймат):
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(0deg, -30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Мисол
X ва Y ўқи бўйлаб бир вақтда қийшишни белгилаш:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(30deg, 30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
