Μια ματιά σε μετασχηματισμούς CSS3 2D
ο Μονάδα μετασχηματισμού είναι μια τεράστια προσθήκη στο CSS3, παίρνει τον τρόπο που χειριζόμαστε στοιχεία σε μια ιστοσελίδα στο επόμενο επίπεδο.
Υπάρχουν μερικά πειράματα που πραγματικά με εντυπωσιάζουν, παραδείγματα όπως αυτό. Ωστόσο, δεν πρόκειται να οικοδομήσουμε κάτι σαν μια εικόνα μόνο για το CSS που μπορεί με κάποιο τρόπο να μετατραπεί σε Autobot, καθώς μπορεί να είναι συντριπτική και όχι αρκετά χρήσιμη στην πραγματική ζωή.
Αντ 'αυτού, αυτή τη φορά, θα προχωρήσουμε και θα αναθεωρήσουμε τα βασικά στοιχεία των μετασχηματισμών CSS3 2D για να δούμε πώς λειτουργεί σε ένα θεμελιώδες επίπεδο.
Η σύνταξη
Η συνιστώσα μετασχηματισμών CSS3 βασικά μας επιτρέπει να μετασχηματίζουμε ένα στοιχείο σε ένα ορισμένο βαθμό, όπως μετάφραση, κλιμάκωση, περιστροφή και κώλυση.
Η επίσημη σύνταξη είναι μετασχηματισμός: μέθοδος (τιμή). Ωστόσο, όπως και κάθε άλλη μεγάλη προσθήκη CSS3 που βρίσκεται ακόμα στα αρχικά στάδια, τα τρέχοντα προγράμματα περιήγησης χρειάζονται ακόμα την έκδοση σύνταξης για την εκτέλεση των μετασχηματισμών. Έτσι, η πλήρης σύνταξη θα αποδειχθεί έτσι:
μετασχηματισμός: μέθοδος (τιμή); / * W3C Επίσημη Σύνταξη * / -o-μετασχηματισμός: μέθοδος (τιμή); / * Opera 10.5+ * / -ms-μετασχηματισμός: μέθοδος (τιμή); / * Internet Explorer 9.0+ * / -moz-transform: μέθοδος (τιμή); / * Firefox 3.6+ * / -webkit-transform: μέθοδος (τιμή); / * Chrome / Safari 3.2+ * /
Επίσης, η μέθοδος που αναφέρουμε παραπάνω είναι η μετασχηματισμό-λειτουργίες, η οποία θα μπορούσε να αντικατασταθεί με ένα από τα ακόλουθα: μεταφράζω(), κλίμακα(), γυρίζω() ή λοξότητα().
Η αξία
Το μεγαλύτερο μέρος της αξίας της μεθόδου θα αντιστοιχεί στο Άξονας Χ και Άξονας Υ. Εάν θυμηθείτε το σύστημα Καρτεσιανών συντεταγμένων από την τάξη μαθημάτων σας στο Γυμνάσιο, η βασική αρχή είναι αρκετά παρόμοια, ο άξονας Χ αντιπροσωπεύει το οριζόντιος γραμμή και ο άξονας Υ αντιπροσωπεύει το κατακόρυφος γραμμή.
Εκτός από περιστροφές. ο περιστροφή θα χρησιμοποιήσει το πολικές συντεταγμένες η οποία εκφράζεται σε μοίρες που κυμαίνονται από 0 έως 360.
Οι τιμές για όλες τις μεθόδους μπορεί να είναι αρνητικές ή θετικές. Ακριβώς σημειώστε όμως, καθώς η ιστοσελίδα διαγιγνώσκεται διαδοχικά από πάνω προς τα κάτω, γεγονός που κάνει τον άξονα Y στον ιστό να λειτουργεί αντίθετα από την αρχική αρχή των καρτεσιανών συντεταγμένων. Αυτό σημαίνει ότι όταν προσθέσετε μια αρνητική τιμή στο Άξονας Υ, θα μετακινηθεί στην κορυφή αντί.
Χρησιμοποιώντας τους Μετασχηματισμούς
Τώρα, ας δούμε την παρακάτω βασική επίδειξη για να δούμε τη μεταμόρφωση σε δράση.
Μεταφράζω
Μην θολώνεστε με τον όρο μεταφράζω, δεν θα μεταφράσει ξένες γλώσσες. ο μεταφράζω εδώ είναι στην πραγματικότητα μια μέθοδος για τη μετακίνηση στοιχείων σε κάποια κατεύθυνση.
Η μέθοδος περιέχει δύο τιμές. Χ και Υ. ο Τιμή X όπως υποδείξαμε παραπάνω, θα πάρουμε το στοιχείο οριζόντια. προς τα αριστερά ή προς τα δεξιά, ενώ το Υ αξία θα το πάρει κατακόρυφα στο κάτω μέρος ή στην κορυφή.
Τώρα, ας δούμε μερικές απλές διαδηλώσεις παρακάτω:
div πλάτος: 100px; ύψος: 100px; μετασχηματισμός: μεταφράστε (100px, 250px);
Το απόσπασμα παραπάνω θα μετακινήσει το στοιχείο για 100px προς τα δεξιά και 250px προς τα κάτω.
div πλάτος: 100px; ύψος: 100px; μετασχηματισμός: μεταφράστε (100px, 0);
Το απόσπασμα παραπάνω θα μετακινήσει το στοιχείο ακριβώς προς τα δεξιά για 100px, επειδή μηδενίζουμε τον άξονα Υ. Στη συνέχεια, αν θέλουμε να μετακινήσουμε το στοιχείο προς τα αριστερά, πρέπει μόνο να ορίσουμε τον άξονα Χ αρνητικά, ως εξής:
div πλάτος: 100px; ύψος: 100px; μετασχηματισμός: μεταφράζει (-100px, 0);
- "Μετάφραση" demo
Εναλλακτικά, είμαστε σε θέση να μετακινήσουμε το στοιχείο σε μία μόνο κατεύθυνση με αυτές τις μεμονωμένες μεθόδους. translateX () και translateY (), η διαφορά είναι ότι καθεμία από αυτές τις μεθόδους δέχεται μόνο μία τιμή.
Έτσι, πρακτικά μιλώντας, το μετασχηματισμός: μεταφράστε (-100px, 0) είναι επίσης ίση με μετασχηματισμός: translateX (-100px).
II - Κλίμακα
ο κλίμακα μέθοδος μας επιτρέπει να μεγέθυνση ή μείωση τα στοιχεία από το πραγματικό της μέγεθος. Η τιμή της κλίμακας είναι ίδια με την τιμή της κλίμακας μεταφράζω μέθοδος παραπάνω, περιέχει επίσης X και Y. Η μόνη διαφορά είναι ότι δεν καθορίζουμε τη μονάδα. Ακολουθεί ένα παράδειγμα:
div πλάτος: 100px; ύψος: 100px; μετασχηματισμός: κλίμακα (1.5);
Το παραπάνω παράδειγμα θα διευρύνει το div 1,5 ή 150% του πραγματικού μεγέθους του, και δεδομένου ότι το κλίμα μας εξίσου και για τις δύο κατευθύνσεις X και Y, πρέπει να το δηλώσουμε μόνο σε μία τιμή. Μπορείτε επίσης να το δηλώσετε με αυτόν τον τρόπο Μετασχηματισμός: κλίμακα (1,5,1,5). αν θέλετε να πάρετε περισσότερες λεπτομέρειες, θα κάνει ακριβώς το ίδιο.
Επιπλέον, εάν θέλουμε να μειώσουμε το στοιχείο θα χρησιμοποιήσουμε συγκεκριμένα μια τιμή από το 0.999 έως το απόλυτο 0, όπως το παρακάτω παράδειγμα, το οποίο θα μειώσει το μέγεθος του div για το 50% ή το μισό:
div πλάτος: 100px; ύψος: 100px; μετασχηματισμός: κλίμακα (0.5);
Αλλά, να είστε προσεκτικοί, εάν ορίσετε την τιμή να είναι απόλυτη “0” ο div θα εξαφανιστούν, οπότε αν δεν έχετε έγκυρο λόγο για να το κάνετε αυτό, δεν θα το συνιστούσα να το κάνετε.
- "Scale" demo
III - Περιστροφή
Όπως αναφέρθηκε προηγουμένως σε αυτή τη θέση, το γυρίζω η μέθοδος χρησιμοποιεί πολικές συντεταγμένες, οπότε η τιμή αναφέρεται σε μοίρες. Ακολουθούν δύο παραδείγματα
Το παρακάτω απόσπασμα θα περιστρέψει το div 30 μοίρες δεξιόστροφα.
div πλάτος: 100px; ύψος: 100px; μετασχηματισμός: περιστροφή (30deg);
Μια αρνητική τιμή, όπως φαίνεται στο παρακάτω παράδειγμα, θα περιστρέφει το div προς την αντίθετη κατεύθυνση (αριστερόστροφα) στον ίδιο βαθμό.
div πλάτος: 100px; ύψος: 100px; μετασχηματισμός: περιστροφή (-30deg);
- "Περιστροφή" επίδειξη
IV - Σμίκρυνση
ο λοξότητα μέθοδος μας επιτρέπει να δημιουργήσουμε ένα είδος παράλληλου γραφήματος. Περιέχει επίσης δύο τιμές του άξονα Χ και Υ. Ωστόσο, η ίδια η τιμή αναφέρεται σε βαθμό, αντί για γραμμικές μετρήσεις που χρησιμοποιούμε για το κλίμακα ή το μεταφράζω μέθοδος. Ακολουθεί ένα παράδειγμα:
div πλάτος: 200px; ύψος: 100px; μετασχηματισμός: λοξή (30deg, 10deg);
- Δείγμα "Skew"
V - Πολλαπλή μέθοδος
ο μεταμορφώνω η ιδιοκτησία δεν περιορίζεται μόνο σε μια μέθοδο, στην πραγματικότητα μπορούμε να συμπεριλάβουμε πολλαπλές μεθόδους σε μεμονωμένες δηλώσεις, όπως αυτή:
div πλάτος: 100px; ύψος: 100px; μετασχηματισμός: μεταφράστε (100px) περιστροφή (45deg);
Το παραπάνω απόσπασμα θα μετακινήσει το στοιχείο 100px προς τα δεξιά και ταυτόχρονα περιστρέφεται επίσης κατά 45 μοίρες.
Δημιουργία "πολλαπλών μεθόδων".
Μετασχηματισμός προέλευσης
ο transfrom-προέλευσης - όπως υποδηλώνει το όνομά του - χρησιμοποιείται για τον έλεγχο του σημείου εκκίνησης του μετασχηματισμού. Αν δεν δηλώσουμε ρητά αυτήν την ιδιότητα με την ακόλουθη σύνταξη μετασχηματισμός-προέλευση: XY;, τότε το πρόγραμμα περιήγησης θα λάβει την προκαθορισμένη τιμή η οποία είναι 50% για το Χ και 50% για το Υ.
Τώρα, εάν καθορίσουμε το μετασχηματισμού-προέλευσης στο 0 (Χ) 0 (Υ) ο μετασχηματισμός θα ξεκινήσει στο πάνω αριστερό μέρος.
Και πάλι, όλα τα προγράμματα περιήγησης χρειάζονται ακόμα την έκδοση πρόθεμα για να καλέσετε αυτήν την ιδιότητα. Έτσι, εδώ είναι η πλήρης έκδοση για να διασφαλιστεί ότι λειτουργεί στα περισσότερα τρέχοντα προγράμματα περιήγησης:
-webkit-transform-προέλευση: X Y; -moz-transform-προέλευση: XY; -ο-μετασχηματισμός-προέλευση: Χ Υ; -ms-μετασχηματισμός-προέλευση: X Y; μετασχηματισμός-προέλευση: XY;
- Demo "μετασχηματισμού-προέλευσης"
συμπέρασμα
Έχουμε περάσει από όλες τις τέσσερις βασικές μεθόδους μετασχηματισμού. μετάφραση, κλίμακα, περιστροφή και κλίση
Ωστόσο, όπως αναφέρθηκε, αυτή η ενότητα είναι ακόμα σε πρώιμο στάδιο, οπότε αν εφαρμόσετε αυτές τις μεθόδους στην επόμενη ιστοσελίδα σας, βεβαιωθείτε ότι υποβαθμίζεται με χάρη για ασύμβατα προγράμματα περιήγησης (δεν αναφέρομαι στο IE6 εδώ).
Τέλος, μπορείτε να δείτε όλη την επίδειξη ή να κάνετε λήψη της πηγής από τους παρακάτω συνδέσμους.
- Διαδήλωση
- Λήψη πηγής
