АКЦИЯ: бесплатные месячные курсы по созданию сайтов
на выбор: верстка, JavaScript, PHP, Python или фреймворки. Сегодня последний день для записи! Жми!
291 of 313 menu
Бесплатный курс по выкладке сайтов на хостинг. Разбираем все нюансы! Начало 14 октября. Жми для записи!

Функция skewX

Функция skewX задает скос элемента по оси X, превращая тем его в параллелограмм. Используется совместно со свойством transform. Значением свойства служит угол в любых единицах для углов. Угол может быть как положительными, так и отрицательными. Положительное значение делает скос влево, отрицательное - вправо. Скос осуществляется вокруг точки, задаваемой свойством transform-origin.

Синтаксис

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

Пример

В данном примере блок скошен на 30 градусов влево:

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

:

Пример

В данном примере блок скошен на 30 градусов вправо:

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

:

Смотрите также

  • функцию skew,
    которая задает скос по осям X и Y
  • функцию skewY,
    которая задает скос по оси Y
byenru