rotate()

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

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

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

Попробуйте

Фиксированная точка, вокруг которой вращается элемент, также известна как начало преобразования. По умолчанию она находится в центре элемента, но вы можете установить собственное значение начала преобразования, используя свойство transform-origin.

Синтаксис

Величина вращения, создаваемая rotate() , задается с помощью <angle>. Если значение положительное, движение будет по часовой стрелке; если отрицательное, то против часовой стрелки. Вращение на 180° называется зеркальным отражением.

rotate(a)

Значения

a: Является <angle>, представляющей угол поворота. Направление поворота зависит от направления письма. В контексте слева направо положительный угол обозначает поворот по часовой стрелке, отрицательный — против часовой. В контексте справа налево положительный угол обозначает поворот против часовой стрелки, отрицательный — по часовой.

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

Примеры

Базовый пример

HTML

<div>Normal</div>
<div class="rotated">Rotated</div>

CSS

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

.rotated {
  transform: rotate(45deg); /* Equal to rotateZ(45deg) */
  background-color: pink;
}

Результат

END_OF_DOCUMENT_MARKER

Комбинирование вращения с другой трансформацией

Если вы хотите применить к элементу несколько трансформаций, будьте внимательны к порядку их указания. Например, если вы вращаете элемент перед перемещением, перемещение будет происходить вдоль новой оси вращения!

HTML

<div>Normal</div>
<div class="rotate">Rotated</div>
<div class="rotate-translate">Rotated + Translated</div>
<div class="translate-rotate">Translated + Rotated</div>

CSS

div {
  position: absolute;
  left: 40px;
  top: 40px;
  width: 100px;
  height: 100px;
  background-color: lightgray;
}

.rotate {
  background-color: transparent;
  outline: 2px dashed;
  transform: rotate(45deg);
}

.rotate-translate {
  background-color: pink;
  transform: rotate(45deg) translateX(180px);
}

.translate-rotate {
  background-color: gold;
  transform: translateX(180px) rotate(45deg);
}

Результат

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

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

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

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

См. также

transform свойство
rotate свойство
<transform-function>
rotate3d()

© 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/rotate