--- title: rotate() slug: Web/CSS/transform-function/rotate() tags: - CSS - CSS трансформация - CSS функция - Reference - Rotate - transform translation_of: Web/CSS/transform-function/rotate() ---

Функция CSS rotate () определяет преобразование, которое перемещает элемент вокруг неподвижной точки (как определено свойством {{Cssxref ("transform-origin")}}, не деформируя его. Количество движения определяется заданным углом; если положительно, движение будет по часовой стрелке, если оно отрицательное, оно будет против часовой стрелки. Вращение на 180 ° называется точечным отражением.

Синтаксис

rotate(a)

Значения

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

Декартовы координаты на ℝ²	Однородные координаты на ℝℙ²	Декартовы координаты на ℝ³	Однородные координаты на ℝℙ³
$(\begin{matrix} cos(a) & -sin(a) \\ sin(a) & cos(a) \end{matrix})$	$(\begin{matrix} cos(a) & -sin(a) & 0 \\ sin(a) & cos(a) & 0 \\ 0 & 0 & 1 \end{matrix})$	$(\begin{matrix} cos(a) & -sin(a) & 0 \\ sin(a) & cos(a) & 0 \\ 0 & 0 & 1 \end{matrix})$	$(\begin{matrix} cos(a) & -sin(a) & 0 & 0 \\ sin(a) & cos(a) & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{matrix})$
	`[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;
}

Result

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

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

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

Result

{{EmbedLiveSample("Объединение_вращения_с_другим_преобразованием", "auto", 320)}}

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

Specification	Status	Comment
{{SpecName("CSS3 Transforms", "#funcdef-transform-rotate", "rotate()")}}	{{Spec2("CSS3 Transforms")}}	Initial definition

Поддержка браузерами

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

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

{{cssxref("transform")}}
{{cssxref("transform-function")}}
{{cssxref("transform-function/rotate3d", "rotate3d()")}}