Denne eiendommen begynte livet som motion-rotation, så ble den offset-rotation, nå er den offset-rotate. Det er fremdeles en eksperimentell egenskap for Working Draft så ?♀️. Hvis du skal bruke den, kan du like godt bruke det siste.
Den offset-rotateegenskap i CSS styrer vinkelen for et element, avhengig av dens offset-distancelangs en offset-path.
Tenk deg at elementet som blir animert langs en sti er en liten racerbil. Når racerbilen beveger seg langs stien, må den virkelig rotere slik at fronten på bilen vender i retningen den beveger seg, ellers vil den se rart og unaturlig ut. Heldigvis, standardverdien for offset-pathsi autosom gjør akkurat det.
Se denne demoen:
Se Pen
Scalextric bil på bevegelsesbane av Chris Coyier (@chriscoyier)
på CodePen.
Mulige verdier
.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 */ )Nettleserstøtte
De offset-*egenskapene er fortsatt betraktet som en eksperimentell funksjon på tidspunktet for dette skriftlig. Hvis den nåværende mangelen på nettleserstøtte gjør deg nølende med å bruke den på et prosjekt, vil du kanskje vurdere å bruke GSAP til dette animasjonsnivået. Dette gir deg den bredeste nettleserstøtten for øyeblikket.
Disse nettleserstøttedataene er fra Caniuse, som har flere detaljer. Et tall indikerer at nettleseren støtter funksjonen i den versjonen og oppover.
Desktop
| Chrome | Firefox | DVS | Kant | Safari |
|---|---|---|---|---|
| 46 | 72 | Nei | 79 | Nei |
Mobil / nettbrett
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | Nei |
Fra og med Chrome 46 og Opera 33 (og relaterte mobilversjoner) har vi "første støtte" i Blink (uten flagg).
Tilleggsinformasjon
- Spesifikasjon: Bevegelsesmodul Nivå 1 Spes
- Samling av eksempler på CodePen
- Fremtidig bruk: CSS Motion Paths av Dan Wilson
- WebKit-billett # 139128
- Mozilla-billett # 1186329
- Microsoft Edge-funksjonsforespørsel
- Chrome-plattformsstatus: CSS bevegelsessti og prøve
- MDN: offset (lenker til andre relaterte egenskaper)