See vara alustas elu nagu motion-rotationsiis offset-rotation, kui nüüd sai offset-rotate. See on endiselt tööprojekti eksperimentaalne omadus, nii et ?♀️. Kui kavatsete seda kasutada, võite kasutada ka kõige uuemat asja.
offset-rotateVara CSS kontrollib nurga elemendi sõltuvalt selle offset-distancemööda offset-path.
Kujutage ette, et rada pidi animeeritud element on väike võidusõiduauto. Kui võistlusauto mööda rada liigub, peab see tõesti pöörlema nii, et auto esiosa oleks suunatud liikumise suunas, vastasel juhul näib see imelik ja ebaloomulik. Õnneks vaikeväärtusi offset-pathtähendab automis teeb täpselt seda.
Vaadake seda demot:
Vaadake
Chris Coyieri (@chriscoyier)
CodePenil Pen Scalextric autot liikumisrajal .
Võimalikud väärtused
.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 */ )Brauseri tugi
offset-*Omadused loetakse endiselt katsefunktsioon ajal seda kirjalikult. Kui praegune brauseritoe puudumine sunnib teid selle kasutamisel projektis kõhklema, võiksite kaaluda GSAP-i kasutamist selle animatsiooni taseme jaoks. See pakub teile praegu kõige laiemat brauserituge.
Need brauseri tugiandmed pärinevad Caniuse'ilt, millel on üksikasjalikum teave. Number näitab, et brauser toetab selle versiooni ja uuemat funktsiooni.
Töölaud
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 46 | 72 | Ei | 79 | Ei |
Mobiil / tahvelarvuti
| Android Chrome | Android Firefox | Android | iOS-i Safari |
|---|---|---|---|
| 88 | 85 | 81 | Ei |
Alates Chrome 46 ja Opera 33 (ja sellega seotud mobiiliversioonidest) on meil Blinkis (esialgne tugi) (lipp puudub).
Lisainformatsioon
- Spetsifikatsioon: Liikumistee moodul 1. tase Spec
- Näidete kogumine CodePenil
- Tulevane kasutamine: Dan Wilsoni CSS-i liikumisteed
- WebKiti pilet # 139128
- Mozilla pilet # 1186329
- Microsoft Edge'i funktsiooni taotlus
- Chrome'i platvormi olek: CSS-i liikumistee ja näidis
- MDN: nihe (lingid muude seotud omadustega)