skew()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

CSS функция skew() трансформирует элемент, наклоняя его в 2D-пространстве.

Интерактивный пример

Данная трансформация является линейным преобразованием векторного пространства (трансвекция или shear mapping), которое деформирует каждую точку элемента на определённый угол по горизонтали или вертикали. Координаты каждой точки изменяются на величину, пропорциональную указанному углу и расстоянию до точки, относительно которой выполняется трансформация (origin); таким образом, чем больше расстояние до смещаемой точки элемента, тем больше она будет смещена по горизонтали или вертикали.

Синтаксис

Функция skew() задаётся одним или двумя значениями которые отображают наклон в каждом из направлений.

skew(ax)

skew(ax, ay)

Значения

ax: Указывается значение <angle>, которое является углом наклона вдоль оси X.
ay: Указывается значение <angle>, которое является углом наклона вдоль оси Y. Если данное значение не задано, то по умолчанию оно равно 0. В этом случае вертикального наклона не будет, а будет только горизонтальный.

Cartesian coordinates on ℝ²	Homogeneous coordinates on ℝℙ²	Cartesian coordinates on ℝ³	Homogeneous coordinates on ℝℙ³
$(\begin{matrix} 1 & tan(ax) \\ tan(ay) & 1 \end{matrix})$	$(\begin{matrix} 1 & tan(ax) & 0 \\ tan(ay) & 1 & 0 \\ 0 & 0 & 1 \end{matrix})$	$(\begin{matrix} 1 & tan(ax) & 0 \\ tan(ay) & 1 & 0 \\ 0 & 0 & 1 \end{matrix})$	$(\begin{matrix} 1 & tan(ax) & 0 & 0 \\ tan(ay) & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{matrix})$
$(\begin{matrix} 1 & tan(ax) \\ tan(ay) & 1 \end{matrix})$	`[1 tan(ay) tan(ax) 1 0 0]`

Примеры

Используя только наклон по оси x

HTML

html

<div>Обычный</div>
<div class="skewed">Наклонённый</div>

CSS

css

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.skewed {
  transform: skew(10deg); /* Equal to skewX(10deg) */
  background-color: pink;
}

Result

Используя два угла

HTML

html

<div>Обычный</div>
<div class="skewed">Наклонённый</div>

CSS

css

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.skewed {
  transform: skew(10deg, 10deg);
  background-color: pink;
}

Результат

Совместимость с браузерами

BCD tables only load in the browser