Зміщення-обертання - CSS-хитрощі

Ця властивість розпочала своє життя, як motion-rotationтоді, так і сталося offset-rotation, тепер воно є offset-rotate. Це все ще робочий проект експериментальної властивості, тому ?‍♀️. Якщо ви збираєтеся ним скористатися, ви можете також використовувати все, що є найновішим.

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, яка містить більше деталей. Цифра вказує на те, що браузер підтримує цю функцію на цій версії та вище.