DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Diese Eigenschaft begann als motion-rotation, wurde dann zu offset-rotation und ist jetzt offset-rotate. Es ist immer noch eine experimentelle Eigenschaft im Working Draft, also 🤷♀️. Wenn Sie sie verwenden möchten, sollten Sie zumindest die aktuellste Version verwenden.
Die CSS-Eigenschaft offset-rotate steuert den Winkel eines Elements, abhängig von seiner offset-distance entlang eines offset-path.
Stellen Sie sich vor, das entlang eines Pfades animierte Element sei ein kleiner Rennwagen. Wenn der Rennwagen sich entlang des Pfades bewegt, muss er sich wirklich drehen, damit die Vorderseite des Autos in die Bewegungsrichtung zeigt, sonst sieht es seltsam und unnatürlich aus. Glücklicherweise ist der Standardwert für offset-path auto, was genau das bewirkt.
Siehe diese Demo
Siehe den Pen
scalextric car on motion-path von Chris Coyier (@chriscoyier)
auf CodePen.
Mögliche Werte
.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 */
}Browser-Unterstützung
Die offset-* Eigenschaften gelten zum Zeitpunkt des Schreibens noch als experimentelle Funktion. Wenn Sie aufgrund des aktuellen Mangels an Browserunterstützung zögern, sie in einem Projekt zu verwenden, sollten Sie erwägen, GSAP für diese Art von Animation zu verwenden. Dies bietet Ihnen derzeit die breiteste Browserunterstützung.
Diese Daten zur Browserunterstützung stammen von Caniuse, wo Sie weitere Details finden. Eine Zahl bedeutet, dass der Browser die Funktion ab dieser Version unterstützt.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 46 | 72 | Nein | 79 | 16.0 |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 127 | 127 | 127 | 16.0 |
Seit Chrome 46 und Opera 33 (und den entsprechenden mobilen Versionen) gibt es in Blink eine „initiale Unterstützung“ (kein Flag).
Verwandte Eigenschaften
- offset-path
- offset-distance
- offset-position
- offset-anchor
Zusätzliche Informationen
- Spezifikation: Motion Path Module Level 1 Spec
- Sammlung von Beispielen auf CodePen
- Zukünftige Verwendung: CSS Motion Paths von Dan Wilson
- WebKit Ticket #139128
- Mozilla Ticket #1186329
- Feature-Anfrage für Microsoft Edge
- Chrome Platform Status: CSS Motion Path und Beispiel
- MDN: offset (links zu den anderen verwandten Eigenschaften)