Функция skewX

skewX функциясы элементди X огу боюнча кыйшайтууну белгилейт, ошону менен аны параллелограммга айландырат. transform касиети менен бирге колдонулат. Касиеттин мааниси катары каалаган бурч бирдиктери колдонулушу мүмкүн. Бурч оң да, терс да болушу мүмкүн. Оң маани солго кыйшайтууну, терс маани - оңго кыйшайтууну түзөт. Кыйшайтуу transform-origin касиети менен белгиленген чекиттин тегерегинде жүргүзүлөт.

Синтаксис

cssселектор {
  transform: skewX(бурч);
}

Мисал

Бул мисалда блок солго 30 градуска кыйшайтылган:

html<div id="elem">lorem ipsum</div>
css#elem {
  transform: skewX(30deg);
  border: 1px solid black;
  width: 100px;
  height: 50px;
}

Результат:

Мисал

Бул мисалда блок оңго 30 градуска кыйшайтылган:

html<div id="elem">lorem ipsum</div>
css#elem {
  transform: skewX(-30deg);
  border: 1px solid black;
  width: 100px;
  height: 50px;
}

Результат:

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

  • skew функциясы,
    ал X жана Y огу боюнча кыйшайтууну белгилейт
  • skewY функциясы,
    ал Y огу боюнча кыйшайтууну белгилейт