rotate()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since июль 2015 г..

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

Синтаксис

rotate(a)

Значения

a: Является<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

html

<div>Normal</div><div>Rotated</div>

CSS

css

div {  width: 80px;  height: 80px;  background-color: skyblue;}.rotated {  transform: rotate(45deg); /* Equal to rotateZ(45deg) */  background-color: pink;}

Result

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

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

HTML

html

<div>Normal</div><div>Rotated</div><div>Rotated + Translated</div><div>Translated + Rotated</div>

CSS

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