rotate

Определение и применение

Свойство rotate поворачивает отрисованный элемент вокруг выбранной оси. В отличие от функции rotate() внутри transform, отдельное свойство можно переопределить, сохранив независимо заданные сдвиг и масштаб.

Как точка поворота и порядок преобразований влияют на результат — в уроке «Трансформация элементов. Часть 1: двухмерные преобразования».

Попробуйте значения rotate

Меняйте угол поворота. Пунктир сохраняет исходное положение, а центр поворота выбирается в вариантах.

Значение свойства

rotate: none

HTML и CSS примера
HTML
<div class="stage">
  <div class="reference">
    <div class="demo-target" style="transform-origin: center">Тони →</div>
  </div>
  <p>Место в потоке сохранено</p>
</div>
CSS
* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 340px;
  padding: 16px;
  background: white;
  color: #172c3d;
  font: 16px/1.5 system-ui;
}
.stage {
  padding: 35px 20px;
}
.reference {
  width: 140px;
  height: 80px;
  margin: 25px auto;
  border: 2px dashed #52697d;
}
.demo-target {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: #9bd3ec;
  border: 2px solid #245a85;
  rotate: none;
}
p {
  font-size: 13px;
  margin-top: 42px;
}

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

Спецификация: CSS transforms-2

Поддерживается во всех основных браузерах с 2023 года.

Показать браузеры
Совместимостьcss.properties.rotate
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
rotate✓104✓104✓72✓90✓14.1✓104✓79✓71✓14.5✓20.0✓104✓14.5
none✓104✓104✓72✓90✓14.1✓104✓79✓71✓14.5✓20.0✓104✓14.5
x, y, or z axis name plus angle value✓104✓104✓72✓90✓14.1✓104✓79✓71✓14.5✓20.0✓104✓14.5

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

CSS синтаксис:

CSS
rotate: none | <angle> | [ x | y | z | <number>{3} ] && <angle>;

/* Глобальные значения */
rotate: initial | inherit | unset | revert | revert-layer;

| разделяет варианты, && требует обе части в любом порядке. <angle> — угол, например 20deg; <number>{3} — три координаты вектора оси. Один угол означает поворот вокруг Z.

JavaScript синтаксис:

JavaScript
element.style.rotate = "15deg";

Начальное значение свойства

none.

Значения свойства

Значения rotate
Значение Описание
none Отдельный поворот отсутствует. Начальное значение.
<angle> Поворот в плоскости экрана. В обычной системе координат положительный угол поворачивает по часовой стрелке, отрицательный — против.
x <angle>, y <angle>, z <angle> Поворот вокруг указанной оси. Для объёмного эффекта у X и Y часто задают перспективу родителю.
<number>{3} <angle> Ось задаётся вектором, например 1 1 0 30deg. Браузер нормализует его; нулевой вектор не задаёт поворот.
initial Устанавливает начальное значение свойства.
inherit Наследует вычисленное значение свойства у родительского элемента.
unset Для ненаследуемого свойства rotate устанавливает его начальное значение свойства.
revert Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS.
revert-layer Сбрасывает значение свойства для текущего слоя каскада @layer. Применяется значение из другого слоя по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.

Как свойство сочетается с другими преобразованиями

Точку поворота задаёт transform-origin, по умолчанию это центр. Для стрелки, закреплённой у одного края, полезно transform-origin: left center. Поворот меняет видимую область, поэтому оставляйте место вокруг элемента: соседние строки не раздвигаются автоматически.

Браузер применяет отдельные свойства в фиксированном порядке: translate, затем rotate, затем scale, после них — список transform. Порядок строк в CSS этот порядок не меняет. Если нужны другие последовательности, используйте функции в transform или вложенные элементы.

Любое значение кроме none, даже визуально нейтральное, создаёт контекст наложения и содержащий блок для позиционированных потомков. Преобразование не действует на обычный незаменяемый строчный элемент: для короткой плашки можно задать display: inline-block.

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

CSS Transforms — rotate.

Наследуется

Нет.

Анимируемое

Да, как поворот. При разных осях используется интерполяция пространственных вращений; одинаковая ось позволяет плавно менять угол.

Примеры, попробуйте сами

Поворот вокруг центра и края

Измените угол на -15deg, затем добавьте transform-origin: left center. Обратите внимание, какая точка остаётся неподвижной.

base.css
CSS
body {
    margin: 1rem;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #243342;
    background: #fff;
}
* {
    box-sizing: border-box;
}
.frame {
    width: 180px;
    height: 120px;
    margin: 48px;
    border: 2px dashed #64748b;
}
.sample {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    background: #bfdbfe;
    border: 2px solid #2563eb;
}
index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Поворот вокруг центра и края</title>
  </head>
  <body>
    <div class="frame"><div class="sample">Тони</div></div>
    <p>Следующий абзац остаётся на своём месте.</p>
  </body>
</html>
style.css
CSS
.sample {
    rotate: 15deg;
}