Ši nuosavybė pradėjo gyvenimą, kaip motion-rotationtada offset-rotation, dabar tapo offset-rotate. Tai vis dar „Working Draft“ eksperimentinė nuosavybė, todėl ?♀️. Jei ketinate jį naudoti, taip pat galite naudoti bet kokį naujausią dalyką.
offset-rotateCSS nuosavybė kontroliuoja elemento kampą priklausomai nuo jos offset-distanceišilgai offset-path.
Įsivaizduokite, kad elementas, animuotas kelyje, yra mažas lenktyninis automobilis. Kai lenktyninis automobilis juda keliu, jis tikrai turi suktis taip, kad automobilio priekis būtų nukreiptas jo judėjimo kryptimi, kitaip jis atrodys keistai ir nenatūraliai. Laimei, numatytoji reikšmė offset-pathyra autobūtent tai.
Peržiūrėkite šią demonstracinę versiją:
Peržiūrėkite
Chriso Coyierio (@chriscoyier) „Pen Scalextric“ automobilį judėjimo kelyje „
CodePen“.
Galimos vertybės
.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 */ )Naršyklės palaikymas
Į offset-*savybės yra vis dar laikomi eksperimentinė funkcija tuo metu šio raštu. Jei šiuo metu trūksta naršyklės palaikymo, jūs nesiryžtate jo naudoti projekte, galite apsvarstyti galimybę naudoti GSAP tokio lygio animacijai. Tai suteiks jums plačiausią naršyklės palaikymą šiuo metu.
Šie naršyklės palaikymo duomenys yra iš „Caniuse“, kuri turi daugiau informacijos. Skaičius rodo, kad naršyklė palaiko šios ir naujesnės versijos funkciją.
Darbalaukis
| „Chrome“ | „Firefox“ | T.Y | Briauna | „Safari“ |
|---|---|---|---|---|
| 46 | 72 | Ne | 79 | Ne |
Mobilusis / planšetinis kompiuteris
| „Android Chrome“ | „Android Firefox“ | „Android“ | „iOS Safari“ |
|---|---|---|---|
| 88 | 85 | 81 | Ne |
„Chrome 46“ ir „Opera 33“ (ir susijusios mobiliosios versijos) „Blink“ (be žymėjimo) turime „pradinį palaikymą“.
Papildoma informacija
- Spec.: 1 lygio judėjimo kelio modulis
- Pavyzdžių rinkimas „CodePen“
- Ateities naudojimas: Dan Wilson CSS judesio keliai
- „WebKit“ bilietas # 139128
- „Mozilla“ bilietas # 1186329
- „Microsoft Edge“ funkcijos užklausa
- „Chrome“ platformos būsena: CSS judėjimo kelias ir pavyzdys
- MDN: kompensuoti (nuorodos į kitas susijusias ypatybes)