skewX()

Базовая Широко поддерживается

Эта функция хорошо поддерживается и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с сентября 2015 года.

Функция skewX() CSS функция определяет преобразование, которое наклоняет элемент в горизонтальном направлении на 2D плоскости. Результат – тип данных <transform-function>.

Попробовать

Это преобразование – сдвиг (трансляция), который искажает каждую точку внутри элемента на определённый угол в горизонтальном направлении. Абсцисса (горизонтальная, координата x) каждой точки изменяется в соответствии со значением указанного угла и расстоянием до начала координат; таким образом, чем дальше от начала координат находится точка, тем большее значение будет к ней добавлено.

Примечание: skewX(a) эквивалентно skew(a).

Синтаксис

skewX(a)

Значения

a: Представляет <angle>, определяющий угол, используемый для искажения элемента вдоль оси абсцисс (горизонтальной, ось x).

Декартовы координаты на ℝ^2	Однородные координаты на ℝℙ^2	Декартовы координаты на ℝ^3	Однородные координаты на ℝℙ^3
$\left( \begin{array}{cc} 1 & \tan(a) \\ 0 & 1 \end{array} \right)$	$\left( \begin{array}{ccc} 1 & \tan(a) & 0 \\ 0 & 1 & 0 \\ 0 & 0 & 1 \end{array} \right)$	$\left( \begin{array}{ccc} 1 & \tan(a) & 0 \\ 0 & 1 & 0 \\ 0 & 0 & 1 \end{array} \right)$	$\left( \begin{array}{cccc} 1 & \tan(a) & 0 & 0 \\ 0 & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{array} \right)$
	`[1 0 tan(a) 1 0 0]`

Примеры

HTML

<div>Normal</div>
<div class="skewed">Skewed</div>

CSS

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

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

Результат

Спецификации

Спецификация
Модуль CSS Transforms Уровень 1 # funcdef-transform-skewx

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`skewX`	1	12	3.5	10.5	3.1	18	4	11	3.2	1.0	2

См. также

transform
<transform-function>
Свойства преобразования:
- translate
- scale
- rotate
- Примечание: свойства skew нет

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skewX