rotate()

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

Синтаксис

rotate(a)

Значения

a

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

Декартовы координаты на ℝ2 Однородные координаты на ℝℙ2 Декартовы координаты на ℝ3 Однородные координаты на ℝℙ3
cos(a) -sin(a) sin(a) cos(a) cos(a) -sin(a) 0 sin(a) cos(a) 0 0 0 1 cos(a) -sin(a) 0 sin(a) cos(a) 0 0 0 1 cos(a) -sin(a) 0 0 sin(a) cos(a) 0 0 0 0 1 0 0 0 0 1
[cos(a) sin(a) -sin(a) cos(a) 0 0]

Примеры

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

HTML

html

<div>Normal</div>
<div class="rotated">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 class="rotate">Rotated</div>
<div class="rotate-translate">Rotated + Translated</div>
<div class="translate-rotate">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);
}

Result

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

Specification
CSS Transforms Module Level 1
# funcdef-transform-rotate

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

BCD tables only load in the browser

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