--- title: skew() slug: Web/CSS/transform-function/skew() translation_of: Web/CSS/transform-function/skew() ---
{{CSSRef}}

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

{{EmbedInteractiveExample("pages/css/function-skew.html")}}

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

Синтаксис

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

skew(ax)

skew(ax, ay)

Значения

ax
Указывается значение {{cssxref("<angle>")}}, которое является углом наклона вдоль оси X.
ay
Указывается значение {{cssxref("<angle>")}}, которое является углом наклона вдоль оси Y. Если данное значение не задано, то по умолчанию оно равно 0. В этом случае вертикального наклона не будет, а будет только горизонтальный.
Cartesian coordinates on ℝ2 Homogeneous coordinates on ℝℙ2 Cartesian coordinates on ℝ3 Homogeneous coordinates on ℝℙ3
1tan(ax)tan(ay)1 1tan(ax)0tan(ay)10001 1tan(ax)0tan(ay)10001 1tan(ax)00tan(ay)10000100001
[1 tan(ay) tan(ax) 1 0 0]

Примеры

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

HTML

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

CSS

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

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

Result

{{EmbedLiveSample("Using_a_single_x-angle", 200, 200)}}

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

HTML

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

CSS

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

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

Результат

{{EmbedLiveSample("Using_two_angles", 200, 200)}}

Поддержка браузеров

Please see the <transform-function> data type for compatibility info.

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