Μετατόπιση-περιστροφή - CSS-Κόλπα

Αυτή η ιδιοκτησία ξεκίνησε τη ζωή όπως motion-rotation, τότε έγινε offset-rotation, τώρα είναι offset-rotate. Είναι ακόμα μια πειραματική ιδιότητα ενός Προσχέδιο Εργασίας, so️. Εάν πρόκειται να το χρησιμοποιήσετε, μπορείτε επίσης να χρησιμοποιήσετε ό, τι είναι το πιο πρόσφατο πράγμα.

Η offset-rotateιδιότητα στο CSS ελέγχει τη γωνία ενός στοιχείου ανάλογα με το offset-distanceκατά μήκος του α offset-path.

Φανταστείτε ότι το στοιχείο που κινείται κατά μήκος ενός μονοπατιού είναι ένα μικρό αγωνιστικό αυτοκίνητο. Καθώς το αγωνιστικό αυτοκίνητο κινείται κατά μήκος της διαδρομής, πρέπει πραγματικά να περιστραφεί έτσι ώστε το μπροστινό μέρος του αυτοκινήτου να βλέπει προς την κατεύθυνση που κινείται, διαφορετικά, θα φαίνεται περίεργο και αφύσικο. Ευτυχώς, η προεπιλεγμένη τιμή offset-pathείναι autoπου κάνει ακριβώς αυτό.

Δείτε αυτό το demo:

Δείτε το στυλό
αυτοκίνητο Scxtxt σε κίνηση-διαδρομή από τον Chris Coyier (@chriscoyier)
στο CodePen.

Πιθανές τιμές

.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 */ )

Υποστήριξη προγράμματος περιήγησης

Οι offset-*ιδιότητες εξακολουθούν να θεωρούνται πειραματικό χαρακτηριστικό κατά τη στιγμή αυτής της συγγραφής. Εάν η τρέχουσα έλλειψη υποστήριξης του προγράμματος περιήγησης σας κάνει να διστάσετε να το χρησιμοποιήσετε σε ένα έργο, τότε ίσως θελήσετε να εξετάσετε το ενδεχόμενο να χρησιμοποιήσετε το GSAP για αυτό το επίπεδο κινούμενης εικόνας. Αυτό θα σας προσφέρει την ευρύτερη υποστήριξη του προγράμματος περιήγησης αυτήν τη στιγμή.

Αυτά τα δεδομένα υποστήριξης του προγράμματος περιήγησης προέρχονται από την Caniuse, η οποία έχει περισσότερες λεπτομέρειες. Ένας αριθμός υποδεικνύει ότι το πρόγραμμα περιήγησης υποστηρίζει τη λειτουργία σε αυτήν την έκδοση και νεότερη.