Pomak-zakretanje - CSS-trikovi

Ovo je svojstvo započelo život kao motion-rotation, onda je postalo offset-rotation, sada je offset-rotate. To je još uvijek eksperimentalno svojstvo Radne verzije, tako da ?‍♀️. Ako ćete ga koristiti, mogli biste upotrijebiti sve što je najnovije.

offset-rotateNekretnina u CSS kontrolira kut elementa ovisno o njegovu offset-distanceuzduž offset-path.

Zamislite da je element koji je animiran na stazi mali trkaći automobil. Kako se trkaći automobil kreće stazom, doista se mora okretati tako da prednji dio automobila bude usmjeren u smjeru u kojem se kreće, inače će izgledati čudno i neprirodno. Srećom, zadana vrijednost za offset-pathje autošto čini upravo to.

Pogledajte ovaj demo:

Pogledajte
automobil Pen scalextric na putu kretanja Chrisa Coyiera (@chriscoyier)
na CodePenu.

Moguće vrijednosti

.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 */ )

Podrška preglednika

Na offset-*svojstva i dalje smatra eksperimentalna značajka u vrijeme pisanja ovog teksta. Ako vas trenutni nedostatak podrške preglednika oklijeva koristiti je na projektu, možda biste trebali razmisliti o upotrebi GSAP-a za ovu razinu animacije. Ovo će vam ponuditi trenutno najširu podršku za preglednike.

Podaci o podršci preglednika potječu iz tvrtke Caniuse, koja sadrži više detalja. Broj označava da preglednik podržava značajku u toj verziji i novijoj.