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

Результат:

Ошондой эле караңыз