Исполняемые доки CSS: Поворот rotate

Q: Как повернуть элемент в CSS?

Используйте transform: rotate(45deg); или отдельное свойство rotate: 45deg;. Положительные углы поворачивают по часовой стрелке, отрицательные против, вокруг центра элемента, если не изменить transform-origin.

Q: Чем transform: rotate() отличается от свойства rotate?

Результат одинаковый. Свойство rotate не зависит от transform, поэтому правило наведения может менять scale или translate, не убирая поворот, и у каждого может быть свой переход. Вместе они действуют как transform: translate() rotate() scale(), в каком бы порядке вы их ни объявили.

Q: Как повернуть картинку на 90 градусов в CSS?

Задайте элементу img transform: rotate(90deg); (или rotate: 90deg;). Изображение сохраняет исходное место в раскладке, поэтому высокое изображение, повернутое горизонтально, может перекрывать соседей; дайте контейнеру место под повернутый размер.

Q: Как сделать вращение элемента в CSS?

Опишите @keyframes spin { to { rotate: 360deg; } } и примените animation: spin 1s linear infinite;. Используйте linear, чтобы скорость оставалась постоянной, и замедляйте или останавливайте вращение при prefers-reduced-motion: reduce.

Q: Как повернуть текст вертикально в CSS?

Для вертикальной подписи writing-mode: vertical-rl обычно лучше, чем rotate(90deg), потому что он меняет и раскладку: элемент занимает вертикальное пространство, а не перекрывает соседей. rotate используйте для небольших декоративных наклонов.

Как повернуть элемент

Два способа, один результат: функция rotate() внутри transform или отдельное свойство rotate. Положительные углы поворачивают по часовой стрелке:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Rotate</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .row { display: flex; gap: 50px; padding: 30px; }
    .box { width: 90px; height: 60px; display: grid; place-items: center; color: white; }
    .a { transform: rotate(45deg); background: #2563eb; }
    .b { rotate: 45deg; background: #16a34a; }
    .c { rotate: -15deg; background: #f59e0b; color: #111827; }
  </style>
</head>
<body>
  <div class="row">
    <div class="box a">transform</div>
    <div class="box b">rotate: 45deg</div>
    <div class="box c">-15deg</div>
  </div>
</body>
</html>

Синий и зеленый блоки повернуты одинаково, на 45 градусов по часовой стрелке вокруг своих центров. У янтарного блока отрицательный угол, поэтому он наклонен против часовой стрелки. Поворот никогда не сдвигает раскладку: каждый блок по-прежнему занимает исходное место 90 на 60, поэтому повернутые элементы могут перекрывать соседей.

Единицы углов

Единица	Полный круг	90 градусов
`deg`	`360deg`	`90deg`
`turn`	`1turn`	`0.25turn`
`rad`	`6.2832rad`	`1.5708rad`
`grad`	`400grad`	`100grad`

Обычный выбор это deg; для вращения хорошо читается turn (rotate: 1turn). Углы больше 360 допустимы и важны в анимациях: rotate(720deg) в ключевом кадре дает два оборота. Всегда пишите единицу: rotate(45) невалидно и игнорируется.

Двигайте ползунок, чтобы увидеть угол в каждой единице:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Angle slider</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .stage { display: grid; place-items: center; height: 160px; background: #f3f4f6; margin: 10px 0; }
    #arrow { width: 110px; height: 14px; background: #2563eb; border-radius: 7px; position: relative; }
    #arrow::after { content: ""; position: absolute; inset-inline-end: -10px; top: -8px; border: 15px solid transparent; border-inline-start: 18px solid #2563eb; border-inline-end: 0; }
  </style>
</head>
<body>
  <label>angle <input id="a" type="range" min="-360" max="360" value="30"></label>
  <div class="stage"><div id="arrow"></div></div>
  <p id="out"></p>
  <script>
    const input = document.getElementById('a');
    const update = () => {
      const deg = Number(input.value);
      document.getElementById('arrow').style.rotate = deg + 'deg';
      document.getElementById('out').textContent =
        deg + 'deg = ' + (deg / 360).toFixed(3) + 'turn = ' + (deg * Math.PI / 180).toFixed(4) + 'rad';
    };
    input.addEventListener('input', update);
    update();
  </script>
</body>
</html>

Поворот вокруг угла: transform-origin

По умолчанию элемент поворачивается вокруг своего центра. transform-origin переносит точку вращения. Стрелка часов вращается вокруг своего конца, а не середины:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>transform-origin</title>
  <style>
    .face { position: relative; width: 160px; height: 160px; border-radius: 50%; background: #e5e7eb; }
    .hand {
      position: absolute;
      left: 76px;              /* 80px center minus half the 8px width */
      top: 20px;
      width: 8px;
      height: 60px;
      border-radius: 4px;
      background: #111827;
      transform-origin: bottom center; /* pivot at the center of the face */
      rotate: 120deg;
    }
    .pin { position: absolute; left: 74px; top: 74px; width: 12px; height: 12px; border-radius: 50%; background: #f59e0b; }
  </style>
</head>
<body>
  <div class="face"><div class="hand" id="hand"></div><div class="pin"></div></div>
</body>
</html>

Нижний конец стрелки стоит на янтарной оси в центре циферблата, а rotate: 120deg поворачивает ее на четыре часа. Удалите строку с transform-origin, и стрелка будет вращаться вокруг собственной середины, мимо оси.

Поворот текста и вертикальные подписи

Небольшой наклон через rotate подходит для бейджа или наклейки. Для по-настоящему вертикальной подписи лучше writing-mode, потому что он меняет раскладку: элемент становится высоким и узким, а не перекрывает то, что рядом.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Vertical text</title>
  <style>
    body { font-family: system-ui, sans-serif; padding-top: 24px; }
    .row { display: flex; gap: 12px; align-items: flex-start; }
    .label { background: #2563eb; color: white; padding: 6px 10px; }
    .rotated { rotate: -90deg; }
    .vertical { writing-mode: vertical-rl; rotate: 180deg; }
    .content { background: #e5e7eb; padding: 10px; }
    .badge { display: inline-block; rotate: -6deg; background: #f59e0b; padding: 4px 10px; margin: 16px 0 0 8px; }
  </style>
</head>
<body>
  <div class="row"><div class="label rotated" id="r">Section</div><div class="content">rotate: -90deg overlaps</div></div>
  <div class="row" style="margin-top: 20px;"><div class="label vertical" id="v">Section</div><div class="content">writing-mode takes vertical space</div></div>
  <span class="badge">New</span>
  <p id="out"></p>
  <script>
    const size = (id) => { const el = document.getElementById(id); return el.offsetWidth + ' x ' + el.offsetHeight; };
    document.getElementById('out').textContent = 'layout box: rotated ' + size('r') + ', writing-mode ' + size('v');
  </script>
</body>
</html>

Ниже показан размер каждой подписи в раскладке. Повернутая по-прежнему занимает исходный широкий низкий блок: она оставляет рядом пустой промежуток и торчит над своей строкой и под ней, залезая на то, что там есть. Подпись с writing-mode занимает высокий узкий блок. rotate: 180deg заставляет ее читаться снизу вверх, и это обычное направление для вертикальной подписи.

Поворот иконки по клику или при наведении

Поворот стрелки на 180 градусов это стандартный способ показать, что раздел открыт. Сочетайте rotate с переходом:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Rotating arrow</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .toggle { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; font: inherit; border: 1px solid #111827; background: white; border-radius: 6px; }
    .chevron { width: 10px; height: 10px; border-inline-end: 2px solid #111827; border-bottom: 2px solid #111827; rotate: 45deg; transition: rotate 0.25s ease-out; }
    .toggle[aria-expanded="true"] .chevron { rotate: 225deg; }
  </style>
</head>
<body>
  <button class="toggle" aria-expanded="false">Details <span class="chevron" aria-hidden="true"></span></button>
  <script>
    const btn = document.querySelector('.toggle');
    btn.addEventListener('click', () => btn.setAttribute('aria-expanded', btn.getAttribute('aria-expanded') !== 'true'));
  </script>
</body>
</html>

Шеврон это квадрат с двумя рамками, повернутый на 45 градусов, чтобы смотреть вниз. Когда кнопка раскрыта, он поворачивается на 225 градусов и смотрит вверх, а переход анимирует пол-оборота. Стилем управляет атрибут aria-expanded, поэтому видимое состояние и состояние, которое объявляют программы чтения с экрана, никогда не расходятся.

Вращающийся индикатор загрузки

Вращение это поворот от 0 до 360 градусов, повторяемый с функцией linear, чтобы скорость не менялась:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Spinner</title>
  <style>
    @keyframes spin {
      to { rotate: 360deg; }
    }
    .spinner {
      width: 36px;
      height: 36px;
      border: 4px solid #e5e7eb;
      border-top-color: #2563eb;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }
    @media (prefers-reduced-motion: reduce) {
      .spinner { animation-duration: 3s; } /* slower, still shows activity */
    }
  </style>
</head>
<body>
  <div class="spinner" role="status" aria-label="Loading"></div>
</body>
</html>

Когда есть только ключевой кадр to, анимация начинается с собственного поворота элемента (нулевого) и заканчивается на 360deg, а infinite повторяет ее без скачка, потому что 360deg выглядит так же, как 0. Для людей, которые попросили систему уменьшить движение, индикатор вращается в три раза медленнее. Подробнее о ключевых кадрах на странице про анимацию.

3D-поворот: rotateX, rotateY

rotateX() наклоняет элемент назад вокруг горизонтальной оси, а rotateY() поворачивает его вокруг вертикальной оси, как дверь. Без перспективы они выглядят просто сплющенными; perspective у родителя добавляет глубину:

.scene { perspective: 600px; }
.card  { transform: rotateY(35deg); }
.flip  { transform: rotateY(180deg); backface-visibility: hidden; } /* card flip */

Чтобы отразить элемент, а не повернуть, используйте scale: -1 1 (горизонтальное отражение). Поворот на 180 градусов переворачивает его вверх ногами, а это не одно и то же.

Частые ошибки

<span> или <a> не поворачивается. Простые строчные элементы игнорируют трансформации. Добавьте display: inline-block.
Поворот исчезает при наведении. Правило наведения с transform: scale(1.1) заменяет transform: rotate(...). Используйте отдельные свойства rotate и scale или перечислите обе функции.
Ожидание, что раскладка освободит место. Повернутое изображение сохраняет неповернутый блок и перекрывает соседей. Дайте контейнеру размер под поворот или используйте writing-mode для текста.
Индикаторы загрузки с ease. Функция по умолчанию ускоряет и замедляет каждый оборот. Используйте linear.
Поворот не вокруг той точки. Задайте transform-origin, прежде чем подбирать угол.

Часто задаваемые вопросы

Как повернуть элемент в CSS?

Используйте transform: rotate(45deg); или отдельное свойство rotate: 45deg;. Положительные углы поворачивают по часовой стрелке, отрицательные против, вокруг центра элемента, если не изменить transform-origin.

Чем transform: rotate() отличается от свойства rotate?

Результат одинаковый. Свойство rotate не зависит от transform, поэтому правило наведения может менять scale или translate, не убирая поворот, и у каждого может быть свой переход. Вместе они действуют как transform: translate() rotate() scale(), в каком бы порядке вы их ни объявили.

Как повернуть картинку на 90 градусов в CSS?

Задайте элементу img transform: rotate(90deg); (или rotate: 90deg;). Изображение сохраняет исходное место в раскладке, поэтому высокое изображение, повернутое горизонтально, может перекрывать соседей; дайте контейнеру место под повернутый размер.

Как сделать вращение элемента в CSS?

Опишите @keyframes spin { to { rotate: 360deg; } } и примените animation: spin 1s linear infinite;. Используйте linear, чтобы скорость оставалась постоянной, и замедляйте или останавливайте вращение при prefers-reduced-motion: reduce.

Как повернуть текст вертикально в CSS?

Для вертикальной подписи writing-mode: vertical-rl обычно лучше, чем rotate(90deg), потому что он меняет и раскладку: элемент занимает вертикальное пространство, а не перекрывает соседей. rotate используйте для небольших декоративных наклонов.

Связанные концепции

Поворот в CSS: rotate(), свойство rotate и вращение