Функция CSS `rotate()`

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

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

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

Попробуйте

transform: rotate(0);

transform: rotate(90deg);

transform: rotate(-0.25turn);

transform: rotate(3.142rad);

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

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

Примечание: Атрибут SVG transform имеет собственный синтаксис, в котором rotate() принимает два необязательных дополнительных значения, задающих центр вращения, как в rotate(45, 50, 50). Такая форма допустима только в атрибуте, но не в CSS: функция CSS rotate() принимает только угол, а центр задаётся с помощью свойства transform-origin.

Синтаксис

rotate(a)

Значения

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

Декартовы координаты на ℝ^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]`

Формальный синтаксис

<rotate()> = 
  rotate( [ <angle> | <zero> ] )

Примеры

Основной пример

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;
}

Результат

Совмещение вращения с другим преобразованием

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

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	WebView для iOS
`rotate`	1	12	3.5	10.5	3.1	18	4	11	3.2	1.0	2	3.2

См. также

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

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