skew()

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

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

transform: skew(0);

transform: skew(15deg, 15deg);

transform: skew(-0.06turn, 18deg);

transform: skew(0.312rad);

<section id="default-example">
 <img
 class="transition-all"
 id="example-element"
 src="/shared-assets/images/examples/firefox-logo.svg"
 width="200" />
</section>

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

Синтаксис

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

skew(ax)
skew(ax, ay)

Значения

ax

Указывается значение <angle>, которое является углом наклона вдоль оси X.

ay

Указывается значение <angle>, которое является углом наклона вдоль оси Y. Если данное значение не задано, то по умолчанию оно равно 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

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

HTML

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

CSS

div {
 width: 80px;
 height: 80px;
 background-color: skyblue;
}
.skewed {
 transform: skew(10deg, 10deg);
 background-color: pink;
}

Результат

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

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

• transform
• <transform-function>