Offset-rotate - CSS-Tricks | Almanach CSS 2025

Ta nieruchomość zaczęła żyć tak motion-rotation, jak wtedy się zmieniła offset-rotation, teraz jest offset-rotate. To wciąż jest eksperymentalna właściwość Working Draft, więc ?‍♀️. Jeśli masz zamiar go użyć, równie dobrze możesz użyć najnowszej rzeczy.

offset-rotateNieruchomość w CSS kontroluje kąt element w zależności od jego offset-distancewzdłuż offset-path.

Wyobraź sobie, że animowany element na ścieżce to mały samochód wyścigowy. Ponieważ samochód wyścigowy porusza się po ścieżce, naprawdę musi się obracać, aby przód samochodu był skierowany w kierunku, w którym się porusza, w przeciwnym razie będzie wyglądał dziwnie i nienaturalnie. Na szczęście wartość domyślna offset-pathto, autoktóra dokładnie to robi.

Zobacz to demo:

Zobacz
samochód Pen scalextric na ścieżce ruchu autorstwa Chrisa Coyiera (@chriscoyier)
na CodePen.

Możliwa wartość

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

Wsparcie przeglądarki

W offset-*chwili pisania tego tekstu właściwości są nadal uważane za eksperymentalne. Jeśli obecny brak obsługi przeglądarek sprawia, że wahasz się przed użyciem jej w projekcie, możesz rozważyć użycie GSAP na tym poziomie animacji. Zapewni to w tej chwili najszerszą obsługę przeglądarek.

Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.