Рекомендуемый курс:

Функция CSS skewX()

Определение и использование skewX() CSS

skewX() Функция используется для наклона элементов под заданным углом по оси x. transform Используется в свойстве.

Совет:skewX(a) Эквивалентно skew(a, 0)!

Пример

Пример 1

Использование skewX() Изображение наклоняется по оси x под заданным углом для нескольких элементов <div>:

#myDiv1 {
  transform: skewX(15deg);
}
#myDiv2 {
  transform: skewX(30deg);
}
#myDiv3 {
  transform: skewX(-25deg);
}

Попробуйте сами

Пример 2

Использование skewX() Изображение наклоняется по оси x под заданным углом:

#img1 {
  transform: skewX(25deg);
}
#img2 {
  transform: skewX(-25deg);
}
#img3 {
  transform: skewX(10deg);
}

Попробуйте сами

Грамматика CSS

skewX(a)

Технические детали

Поддержка браузерами

Числа в таблице показывают версию первого браузера, который полностью поддерживает эту функцию.

См. также:

Урок:2D-трансформации CSS

См. также:Свойство transform в CSS

См. также:Функция skew() в CSS

См. также:Функция skewY() в CSS