Šis īpašums sāka dzīvot kā motion-rotationtad, kad kļuva offset-rotation, tagad ir offset-rotate. Tas joprojām ir darba melnraksta eksperimentālais īpašums, tāpēc ?♀️. Ja jūs to izmantosit, jūs varētu arī izmantot visu, kas ir jaunākais.
offset-rotateĪpašums CSS kontrolē leņķi elementa atkarībā tā offset-distancevirzienā pa offset-path.
Iedomājieties, ka elements, kas tiek animēts pa ceļu, ir mazs sacīkšu auto. Kad sacīkšu automašīna pārvietojas pa ceļu, tai patiešām ir jāgriežas tā, lai automašīnas priekšpuse būtu vērsta virzienā, kurā tā pārvietojas, pretējā gadījumā tā izskatīsies dīvaini un nedabiski. Par laimi, noklusējuma vērtība offset-pathir autotieši tā.
Skatiet šo demonstrāciju:
Skatiet
Krena Koijera (@chriscoyier) Pen Scalextric automašīnu kustības ceļā
vietnē CodePen.
Iespējamās vērtības
.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 */ )Pārlūkprogrammas atbalsts
Šīs offset-*rakstīšanas laikā īpašības joprojām tiek uzskatītas par eksperimentālu iezīmi. Ja pašreizējais pārlūka atbalsta trūkums liek jums vilcināties ar tā izmantošanu projektā, ieteicams apsvērt iespēju izmantot GSAP šim animācijas līmenim. Tas jums šobrīd piedāvās visplašāko pārlūka atbalstu.
Šie pārlūka atbalsta dati ir no Caniuse, kurai ir sīkāka informācija. Cipars norāda, ka pārlūks atbalsta šo un jaunākās versijas funkciju.
Darbvirsma
| Chrome | Firefox | IE | Mala | Safari |
|---|---|---|---|---|
| 46 | 72 | Nē | 79 | Nē |
Mobilais / planšetdators
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81. | Nē |
Sākot ar pārlūku Chrome 46 un Opera 33 (un ar to saistītajām mobilajām versijām), mums ir “sākotnējais atbalsts” Blink (nav karodziņa).
Papildus informācija
- Spec: Kustības ceļa modulis 1. līmenis Spec
- Piemēri kolekcija CodePen
- Nākotnes izmantošana: Dan Wilson CSS kustības ceļi
- WebKit biļete # 139128
- Mozilla biļete # 1186329
- Microsoft Edge funkcijas pieprasījums
- Chrome platformas statuss: CSS kustības ceļš un paraugs
- MDN: nobīde (saites uz citām saistītajām īpašībām)