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

Свойство offset-rotate определяет ориентацию элемента в зависимости от его offset-distance вдоль offset-path.

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

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

Начальное значение	auto
Применяется к	Элементам, поддерживающим трансформации.
Наследуется	Нет.
Анимировано	Да.
Версия	Motion Path Module Level 1
Синтаксис DOM	object.style.offsetRotate = "auto 90deg";

Синтаксис

Синтаксис CSS offset-rotate

css

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

Пример свойства offset-rotate:

Пример кода CSS offset-rotate

html

<!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>

Try it Yourself »

Значения

Значение	Описание
auto	Объект поворачивается на угол направления пути смещения.

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

Практика

Возможности использования CSS-свойства offset-rotate?

Управляет ориентацией элемента.Устанавливает цвет элемента.Позиционирует элемент относительно его нормального положения.Создает 3D-трансформации для элемента.Устанавливает точку вращения относительно свойства position.

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

Синтаксис ​

Пример свойства offset-rotate: ​

Значения ​

Практика ​

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

Синтаксис

Пример свойства offset-rotate:

Значения

Практика