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