Смещение-поворот - CSS-хитрости

Это свойство начинало свою жизнь таким motion-rotation, каким оно стало offset-rotation, теперь оно есть offset-rotate. Это все еще экспериментальное свойство Working Draft, так что. Если вы собираетесь его использовать, вы можете использовать все, что было самым последним.

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

Представьте, что анимированный элемент на пути представляет собой небольшую гоночную машину. По мере того, как гоночная машина движется по траектории, ей действительно нужно вращаться так, чтобы передняя часть машины была обращена в том направлении, в котором она движется, иначе это будет выглядеть странно и неестественно. К счастью, значение по умолчанию offset-path- autoэто именно то, что нужно.

Смотрите эту демонстрацию:

См.
Масштабный автомобиль Pen на пути движения Криса Койера (@chriscoyier)
на CodePen.

Возможные значения

.mover ( offset-rotate: auto; /* default, faces forward */ offset-rotate: reverse; /* faces backward */ offset-rotate: 30deg; /* fixed angle */ offset-rotate: auto 30deg; /* combine auto behavior with a set rotation */ )

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

На offset-*момент написания этой статьи свойства все еще считаются экспериментальной функцией. Если текущее отсутствие поддержки браузера заставляет вас не решаться использовать его в проекте, тогда вы можете рассмотреть возможность использования GSAP для этого уровня анимации. Это предложит вам самую широкую поддержку браузера на данный момент.

Эти данные о поддержке браузером взяты из Caniuse, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.