--- 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.

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