Denne ejendom begyndte livet, som motion-rotation
det blev offset-rotation
, nu er det offset-rotate
. Det er stadig en eksperimentel egenskab for Working Draft, så ?♀️. Hvis du vil bruge det, kan du lige så godt bruge hvad den seneste ting er.
Den offset-rotate
ejendom i CSS styrer vinklen på et element, afhængigt af dens offset-distance
langs en offset-path
.
Forestil dig, at elementet, der animeres langs en sti, er en lille racerbil. Når racerbilen bevæger sig langs stien, skal den virkelig dreje, så fronten på bilen vender i den retning, den bevæger sig, ellers ser den underlig og unaturlig ud. Heldigvis er standardværdien for offset-path
, auto
der gør netop det.
Se denne demo:
Se Pen
Scalextric bil på motion-path af Chris Coyier (@chriscoyier)
på CodePen.
Mulige værdier
.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 */ )
Browsersupport
De offset-*
egenskaber er stadig betragtes som en eksperimentel funktion på tidspunktet for dette skrives. Hvis den nuværende mangel på browserstøtte får dig til at tøve med at bruge den til et projekt, kan du overveje at bruge GSAP til dette animationsniveau. Dette giver dig den bredeste browsersupport i øjeblikket.
Denne browsersupportdata er fra Caniuse, som har flere detaljer. Et tal angiver, at browseren understøtter funktionen i den version og opefter.
Desktop
Chrome | Firefox | IE | Edge | Safari |
---|---|---|---|---|
46 | 72 | Ingen | 79 | Ingen |
Mobil / tablet
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
88 | 85 | 81 | Ingen |
Fra Chrome 46 og Opera 33 (og de relaterede mobilversioner) har vi "indledende support" i Blink (intet flag).
Yderligere Information
- Spec: Motion Path Module Level 1 Spec
- Samling af eksempler på CodePen
- Fremtidig brug: CSS Motion Paths af Dan Wilson
- WebKit-billet # 139128
- Mozilla-billet # 1186329
- Microsoft Edge-funktionsanmodning
- Chrome-platformstatus: CSS bevægelsessti og prøve
- MDN: offset (links til andre relaterede egenskaber)