Отместване-завъртане - CSS-трикове

Този имот започна живот както motion-rotation, след това стана offset-rotation, сега е offset-rotate. Все още е експериментално свойство Работен проект, така че ?‍♀️. Ако ще го използвате, можете също да използвате каквото и да е най-новото.

В offset-rotateимота в CSS контролира ъгълът на елемент в зависимост от нейното offset-distanceпротежение на offset-path.

Представете си, че елементът, анимиран по пътека, е малка състезателна кола. Докато състезателната кола се движи по пътеката, тя наистина трябва да се завърти, така че предната част на колата да е обърната в посоката, в която се движи, в противен случай ще изглежда странно и неестествено. За щастие, стойността по подразбиране за offset-pathе това, autoкоето прави точно това.

Вижте тази демонстрация:

Вижте
автомобила Pen scalextric на път за движение от Chris Coyier (@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, който има повече подробности. Число показва, че браузърът поддържа функцията на тази версия и по-нова.