W3docs
ru
Войти

CSS свойство offset-rotate

Используйте CSS свойство offset-rotate для задания угла поворота элемента вдоль offset-path. Значения и примеры.

Свойство CSS offset-rotate задаёт ориентацию (поворот) элемента при его перемещении вдоль пути движения. Когда элемент позиционирован с помощью offset-path и перемещается с помощью offset-distance, свойство offset-rotate определяет, будет ли элемент автоматически поворачиваться по направлению движения, смотреть в противоположную сторону или сохранять фиксированный угол.

Это свойство незаменимо, когда нужно, чтобы стрелка, автомобиль, самолёт или любая направленная фигура «следовала за кривой», а не скользила вдоль неё жёстко. По умолчанию элемент сохраняет исходную ориентацию независимо от изгибов пути; offset-rotate: auto заставляет его поворачиваться так, чтобы передний край всегда был направлен вдоль пути.

В ранних черновиках спецификации это свойство называлось motion-rotation, затем offset-rotation и, наконец, offset-rotate. Старые названия могут встречаться в устаревших статьях, однако актуальным является только offset-rotate.

Краткий справочник

Начальное значениеauto
Применяется кТрансформируемым элементам
НаследуетсяНет
АнимируетсяДа
Вычисленное значениеКлючевое слово, угол или оба вместе
ВерсияMotion Path Module Level 1
DOM Syntaxobject.style.offsetRotate = "auto 90deg";

Синтаксис

/* keywords */
offset-rotate: auto;
offset-rotate: reverse;

/* a fixed angle */
offset-rotate: 90deg;
offset-rotate: 0.5turn;

/* a keyword plus an angle offset */
offset-rotate: auto 45deg;
offset-rotate: reverse 90deg;
  • auto — элемент поворачивается в соответствии с направлением пути в его текущей позиции (0deg означает «направлен вдоль пути»).
  • reverse — как auto, но с дополнительным поворотом на 180deg, так что элемент смотрит назад вдоль пути.
  • <angle> — фиксированный поворот, игнорирующий направление пути. Элемент поворачивается на это постоянное значение по часовой стрелке.
  • auto <angle> — комбинация обоих вариантов: следование направлению пути с добавлением угла поверх него. Наиболее полезная форма, когда фигура «смотрит» в нестандартном направлении (например, стрелка, нарисованная вверх, нуждается в auto 90deg, чтобы быть направленной вдоль пути вправо).

Распространённая ошибка: offset-rotate действует только тогда, когда у элемента задан offset-path. Само по себе свойство ничего не делает — нет направления пути, с которым нужно выравниваться.

Пример: следование направлению пути

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-color: #ccc;
      }
      .mover {
        width: 70px;
        height: 70px;
        background: linear-gradient(#8ebf42 50%, #1c87c9 50%);
        position: absolute;
        left: 40%;
        top: 100px;
        offset-path: path("M18.45,58.46s52.87-70.07,101.25-.75,101.75-6.23,101.75-6.23S246.38,5.59,165.33,9.08s-15,71.57-94.51,74.56S18.45,58.46,18.45,58.46Z");
        offset-rotate: reverse;
        animation: move 4s linear infinite;
      }
      @keyframes move {
        100% {
          offset-distance: 100%;
        }
      }
    </style>
    <body>
      <h2>Offset-rotate property example</h2>
      <div class="mover"></div>
    </body>
</html>
Попробуйте сами »

В примере выше замените offset-rotate: reverse; на offset-rotate: auto;, чтобы фигура смотрела вперёд, а не назад, или укажите фиксированное значение, например offset-rotate: 45deg;, чтобы сохранить постоянный наклон, игнорирующий изгибы пути.

Пример: фиксированный угол vs. auto

Фиксированный <angle> сохраняет одну и ту же ориентацию на всём пути, тогда как auto и reverse меняют ориентацию в каждой точке. Сравните два квадрата ниже:

<!DOCTYPE html>
<html>
  <head>
    <title>offset-rotate: auto vs. fixed angle</title>
    <style>
      .track {
        position: relative;
        height: 160px;
      }
      .mover {
        width: 40px;
        height: 40px;
        position: absolute;
        offset-path: path("M20,80 Q120,0 220,80 T420,80");
        animation: move 4s linear infinite;
      }
      /* turns to follow the curve */
      .auto {
        background: #1c87c9;
        offset-rotate: auto;
      }
      /* always tilted 45deg, ignores the curve */
      .fixed {
        background: #8ebf42;
        offset-rotate: 45deg;
      }
      @keyframes move {
        100% {
          offset-distance: 100%;
        }
      }
    </style>
  </head>
  <body>
    <h2>auto (blue) follows the curve; 45deg (green) stays fixed</h2>
    <div class="track">
      <div class="mover auto"></div>
      <div class="mover fixed"></div>
    </div>
  </body>
</html>

Поддержка браузерами и доступность

Свойства motion path поддерживаются в актуальных версиях Chrome, Edge, Safari и Firefox. Поскольку эффект представляет собой исключительно декоративное движение, следует уважать настройки пользователей, предпочитающих уменьшенное движение, оборачивая анимации в медиазапрос:

@media (prefers-reduced-motion: reduce) {
  .mover {
    animation: none;
  }
}

Для более тонкого управления самим путём обратитесь к offset-path и offset-distance; сокращённое свойство offset позволяет задать их вместе с offset-rotate в одном объявлении. Если требуется только статический поворот, не связанный с путём, используйте вместо этого transform.

Значения

ЗначениеОписание
autoЭлемент поворачивается в соответствии с направлением пути offset в его текущей позиции.
reverseЭлемент поворачивается по направлению пути плюс 180 градусов (смотрит назад).
<angle>Постоянный поворот по часовой стрелке на заданный угол, игнорирующий направление пути.
auto <angle>Следует направлению пути и добавляет к нему заданный угол.
initialУстанавливает значение свойства по умолчанию (auto).
inheritНаследует свойство от родительского элемента (здесь не имеет эффекта, поскольку свойство не наследуется).

Практика

Практика
Чего можно достичь с помощью CSS свойства offset-rotate?
Чего можно достичь с помощью CSS свойства offset-rotate?
Was this page helpful?