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;
}
:
