Offset-rotere - CSS-tricks

Anonim

Denne ejendom begyndte livet, som motion-rotationdet 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-rotateejendom i CSS styrer vinklen på et element, afhængigt af dens offset-distancelangs 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, autoder 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)