Πώς να δημιουργήσετε 3D Κουμπί Flip Animations με CSS
Flip animations είναι δημοφιλή εφέ CSS που εμφανίζονται τόσο το μπροστινό όσο και το πίσω μέρος ενός στοιχείου HTML μετατρέποντάς τα από την κορυφή στο κάτω μέρος ή από τα αριστερά προς τα δεξιά (και αντίστροφα). Είναι ραβδώσεις σε 2 διαστάσεις, αλλά είναι ακόμα πιο δροσερές όταν εκτελούνται σε 3D.
Σε αυτή τη θέση, θα σας δείξω πώς να δημιουργήστε απλά κουμπιά 3D, και προσθέστε κινούμενα σχέδια σε αυτούς.
Μπορείτε να δείτε το αποτέλεσμα στο demo παρακάτω, αν κάνετε κλικ στα κουμπιά, θα εκτελέσουν την ετικέτα flip animation.
1. Δημιουργία του HTML για το κουμπί 3D
Για να δημιουργήσετε ένα κουμπί 3D (με Top → Bottom flip), πρώτα στοιβάζουμε τρία Ορίσαμε το Προσθέτουμε εικόνες φόντου στις μπροστινές και πίσω όψεις των κουμπιών και ρυθμίζουμε μια δροσερή γραμμική κλίση πίσω από τις εικόνες και για τις δύο. Το κόλπο εδώ είναι ότι στο CSS μπορείτε να ορίσετε πολλές εικόνες ως εικόνα φόντου για το ίδιο στοιχείο και μπορείτε επίσης να δηλώσετε κλίσεις ως εικόνες φόντου. Το μεσαίο πρόσωπο, Προς το κάλυψη του χώρου μεταξύ των εμπρός και πίσω όψεων με τη μεσαία, εμείς βάλτε τη μεσαία όψη επίπεδη σε όλο το x-επίπεδο του 3D χώρου χρησιμοποιώντας το Δεδομένου ότι το μεσαίο πρόσωπο τοποθετήθηκε επίπεδη κατά μήκος του επιπέδου x, το άνω σημείο του στον άξονα y πηγαίνει 10px (το μισό του ύψους του) κάτω από το πρωτότυπο. Έτσι, για να το τραβήξουμε πίσω και να ευθυγραμμίσουμε την κορυφή με τις δύο άλλες πλευρές των κουμπιών, πρόσθεσα το Χρησιμοποίησα το Μέχρι στιγμής, θα βλέπετε μόνο το μπροστινό πρόσωπο στην οθόνη, καθώς το x-plane είναι κρυμμένο από την προβολή, και στο y-plane (οθόνη) το τελευταίο πρόσωπο που καθορίζεται ήταν το μπροστινό. Περιστρέφοντας το κουμπί θα μπορείτε να δείτε και τα άλλα πρόσωπα. Η ιδιότητα CSS στυλ μετασχηματισμού καθορίζει αν τα υποκείμενα στοιχεία ενός στοιχείου HTML εμφανίζονται επίπεδα ή τοποθετούνται στον χώρο 3D. Στο απόσπασμα κώδικα παρακάτω, το Σημειώστε ότι χρησιμοποίησα Ωστόσο, στο επόμενο βήμα θα το αλλάξουμε Σε αυτό το σημείο, το κουμπί μας 3D δεν είναι ακόμα κινούμενο. Μπορούμε να το κάνουμε αυτό χρησιμοποιώντας το Ας κάνουμε το κουμπί να περιστρέφεται μόνο όταν αιωρείται, έτσι αντί του Σημειώστε ότι στο repo της Github, εγώ πρόσθεσε ένα πλαίσιο ελέγχου σε κάθε κουμπί για να ενεργοποιήσετε την κινούμενη εικόνα .flipBtn δοχείο που θα λειτουργεί ως κουμπί 3D και τοποθετούμε το κουμπί 3D στο .flipBtnWrapper περικάλυμμα.
2. Προσθήκη βασικών μορφών με το CSS
πλάτος και ύψος τις ιδιότητες του περιτυλίγματος, του κουμπιού και του κουμπιού και τις τοποθετείτε χρησιμοποιώντας τη σχετική / απόλυτη τεχνική τοποθέτησης. .flipBtnWrapper πλάτος: 200px; ύψος: 200px; θέση: σχετική. .flipBtn, .flipBtn_face πλάτος: 100%; ύψος: 100%. θέση: απόλυτη;
3. Στυλ το κουμπί 3 αντιμετωπίζει
.flipBtn_mid, δίνεται α ύψος των 20px, και δημιουργείται ένας ίδιος χώρος 20px μεταξύ της μπροστινής και της πίσω όψης. Επιτυγχάνουμε το τελευταίο χρησιμοποιώντας το translateZ () CSS λειτουργία ότι μετακινεί ένα στοιχείο κατά μήκος του άξονα z. Πάμε το πίσω μέρος πίσω από 10px, και φέρνουμε την εμπρόσθια όψη προς τα εμπρός κατά 10px. .flipBtn_front background-image: url ("image / css-3d-flip-button-animation-play.png"), γραμμική κλίση (# FF6366 50%, # FEA56E); backface-ορατότητα: κρυφό. μετασχηματισμός: translateZ (10px); .flipBtn_back background-image: url ("image / css-3d-flip-button-animation-pause.png"), γραμμική κλίση (# FF6366 50%, # FEA56E); φόντο-χρώμα: μπλε; μετασχηματισμός: translateZ (-10px); .flipBtn_mid ύψος: 20px; φόντο-χρώμα: # d5485a; μετασχηματισμός: rotateX (90deg); κορυφή: -10px; μετασχηματισμός: rotateX (90deg); αποφασίστε αυτό το καθιστά κάθετο τόσο προς το μπροστινό όσο και προς το πίσω μέρος του κουμπιού στο επίπεδο y.κορυφή: -10px κανόνα επίσης.πίσω όψη-ορατότητα CSS ιδιότητα για την εμπρός όψη, οπότε όταν γυρίσουμε το κουμπί, το πίσω μέρος της πρόσοψης δεν θα είναι ορατό.
4. Περιστρέψτε το κουμπί
μετασχηματισμός-στυλ: διατήρηση-3d; Ο κανόνας δίνει 3D τόνο στο κουμπί μας, ενώ το μετασχηματισμός: rotatexX () ιδιότητα περιστρέφεται γύρω από τον άξονα x. .flipBtn μετασχηματισμός-στυλ: διατήρηση-3d; μετασχηματισμός: rotateX (-120deg);
-120deg αποκλειστικά για λόγους επίδειξης, διότι έτσι είναι ευκολότερο να απεικονιστεί η λειτουργία της περιστροφής του κουμπιού.
-180deg για να κάνετε το πλήκτρο να στρέφεται τελείως.5. Κινήστε το κουμπί
μετάβαση ιδιοκτησία. Χρησιμοποιούμε το μεταμορφώνω ιδιότητα για την πρώτη τιμή, καθώς αυτή είναι η ιδιότητα που θέλουμε να εφαρμόσουμε το εφέ μετάβασης για. Η δεύτερη τιμή, είναι η διάρκεια, 2s..flipBtn επιλογέα, ας χρησιμοποιήσουμε .flipBtnWrapper: hover .flipBtn. Όπως αναφέρθηκε προηγουμένως, αλλάξτε επίσης την τιμή του rotateX () προς το -180deg για να μετακινήσετε το κουμπί. .flipBtn μετάβαση: μετασχηματισμός 2s; μετασχηματισμός-στυλ: διατήρηση-3d; .flipBtnWrapper: hover .flipBtn μετασχηματισμός: rotateX (-180deg);
:τετραγωνισμένος αντί για :φτερουγίζω, με αυτόν τον τρόπο συμπεριφέρεται περισσότερο σαν ένα πραγματικό κουμπί. Επίσης, έχω συμπεριλάβει τέσσερα διαφορετικά κουμπιά με τέσσερις κατεύθυνες (Top → Bottom, Bottom → Top, Right → Left and Left → Right) έτσι ώστε να μπορείτε εύκολα να χρησιμοποιήσετε όποιον θέλετε.
