w3docs logo

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

Свойство offset-rotate указывает ориентацию элемента в зависимости от offset-distance на траектории (offset-path).

Свойство имеет следующие значения: auto, reverse, <angle>.

Значение по умолчанию auto
Применяется К трансформируемым элементам.
Наследуется Нет
Анимируемое Да
Версия Motion Path Module Level 1
DOM синтаксис object.style.offsetRotate = "auto 90deg";

Синтаксис

offset-rotate: auto | reverse | <angle>;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</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</h2>
    <div class="mover"></div>
  </body>
</html>

Значения

Значение Описание
auto Объект повернут углом направления траектории.
reverse Объект повернут углом направления траектории с добавлением 180 градусов.
<angle> Блок имеет постоянное вращение по часовой стрелке, применяемое к блоку с указанным углом вращения.
initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.

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

chrome edge firefox safari opera
56.0+ ✕ ✕ ✕ ?

Практикуйте свои знания

С помощью чего осуществляется изменение ориентации элемента с помощью свойства offset-rotate?
Считаете ли это полезным?