Функсияи 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;
}
:
