skewY()

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

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

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

Попробовать

Это преобразование представляет собой сдвиг (сдвиг), искажающее каждую точку элемента под определенным углом по вертикали. Ордината (вертикальная, y-координата) каждой точки изменяется в соответствии со значением указанного угла и расстоянием до начала координат; таким образом, чем дальше от начала координат находится точка, тем больше будет добавленное значение.

Синтаксис

skewY(a)

Значения

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

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

Примеры

HTML

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

CSS

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

.skewed {
  transform: skewY(40deg);
  background-color: pink;
}

Результат

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

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

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`skewY`	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/skewY