CSS offset-rotate — орієнтація елемента на траєкторії

CSS властивість offset-rotate задає орієнтацію елемента, що рухається траєкторією offset-path: за напрямком руху, дзеркально або під фіксованим кутом.

правити

Загальний опис

За замовчуванням (auto) елемент повертається за напрямком руху, як машинка на трасі — переднім краєм уперед. reverse розвертає його на 180° — задом наперед.

Фіксований кут (0deg, 45deg) вимикає автоматичне обертання: елемент проходить траєкторію, не повертаючись. Запис auto 45deg додає кут до автоматичного повороту.

Позицію на траєкторії задає offset-distance — саме її анімують, щоб елемент рухався.

правити

Нотатка

Кут у записі auto <angle> додається до повороту за напрямком руху — зручна поправка, коли «ніс» елемента в макеті дивиться не вправо. Сама траєкторія лишається в offset-path.

автор: NagarD правити

+ додати пораду чи нотатку

Синтаксис

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

Властивість offset-rotate може отримувати 4 значень:

auto

Поворот за напрямком руху. Значення без задання.

автор: NagarD

правити

reverse

Як auto, але з розворотом на 180° — задом наперед.

автор: NagarD

правити

angle

Фіксований кут (0deg, 90deg): елемент не обертається під час руху.

автор: NagarD

правити

auto <angle>

Кут додається до автоматичного повороту: auto 45deg.

автор: NagarD

правити

Переглядачі

Переглядачів ще не додано.

Приклади

+ запропонувати свій приклад у пісочниці

<div class="plane">✈️</div>
<div class="plane fixed">✈️</div>

.plane {
    offset-path: path('M 0 60 Q 200 -40 400 60');
    width: max-content;
    animation: fly 4s linear infinite;
}

.fixed {
    offset-path: path('M 0 160 Q 200 60 400 160');
    offset-rotate: 0deg;
}

@keyframes fly {
    to { offset-distance: 100%; }
}