Μετασχηματισμός - CSS-Κόλπα

Η transformιδιότητα σάς επιτρέπει να χειρίζεστε οπτικά ένα στοιχείο κάνοντας κλίση, περιστροφή, μετάφραση ή κλιμάκωση:

.element ( width: 20px; height: 20px; transform: scale(20); )

Ακόμη και με ένα δηλωμένο ύψος και πλάτος, αυτό το στοιχείο θα κλιμακωθεί έως είκοσι φορές το αρχικό του μέγεθος:

Δείτε την εξήγηση Pen Transform από CSS-Tricks (@ css-tricks) στο CodePen.

Δίνοντας αυτή τη συνάρτηση, δύο τιμές θα την τεντώσουν οριζόντια από την πρώτη και κάθετα από τη δεύτερη. Στο παρακάτω παράδειγμα, το στοιχείο θα έχει τώρα διπλάσιο πλάτος αλλά το μισό ύψος του αρχικού στοιχείου:

.element ( transform: scale(2, .5); )

Ή μπορείτε να είστε πιο συγκεκριμένοι χωρίς να χρησιμοποιήσετε τη συντομογραφία:

transform: scaleX(2); transform: scaleY(.5);

Αλλά scale()είναι μόνο μία από τις πολλές λειτουργίες μετασχηματισμού που είναι διαθέσιμες:

Αξίες

• scale(): Επηρεάζει το μέγεθος του στοιχείου. Αυτό ισχύει και για την font-size, padding, height, και widthενός στοιχείου, πάρα πολύ. Είναι επίσης μια συνάρτηση συντομογραφίας για τις λειτουργίες scaleXκαι scaleY.
• skewX()και skewY(): Γέρνει ένα στοιχείο προς τα αριστερά ή προς τα δεξιά, σαν να μετατρέπεται ένα ορθογώνιο σε παραλληλόγραμμο. skew()είναι μια συντομογραφία που συνδυάζει skewX()και skewYαποδεχόμενες και τις δύο τιμές.
• translate(): Μετακινεί ένα στοιχείο πλάγια ή πάνω και κάτω.
• rotate(): Περιστρέφει το στοιχείο δεξιόστροφα από την τρέχουσα θέση του.
• matrix(): Μια συνάρτηση που πιθανώς δεν προορίζεται να γραφτεί με το χέρι, αλλά συνδυάζει όλες τις μετατροπές σε μία.
• perspective(): Δεν επηρεάζει το ίδιο το στοιχείο, αλλά επηρεάζει τους μετασχηματισμούς των τρισδιάστατων μετασχηματισμών των απογόνων στοιχείων, επιτρέποντάς τους να έχουν μια συνεπή προοπτική βάθους.

Λοξότητα

/* Skew points along the x-axis */ .element ( transform: skewX(25deg); ) /* Skew point along the y-axis */ .element ( transform: skewY(25deg); ) /* Skew points along the x- and y-axis */ .element ( transform: skew(25deg, 25deg); )

Οι συναρτήσεις μετασχηματισμού skewXκαι skewYκλίσης ενός στοιχείου με τον ένα ή τον άλλο τρόπο Θυμηθείτε: δεν υπάρχει στενή ιδιότητα για παράκαμψη ενός στοιχείου, επομένως θα πρέπει να χρησιμοποιήσετε και τις δύο λειτουργίες. Στο παρακάτω παράδειγμα, μπορούμε να στρέψουμε ένα τετράγωνο 100px x 100px αριστερά και δεξιά με skewX:

Δείτε την εξήγηση Pen Transform από CSS-Tricks (@ css-tricks) στο CodePen.

Ενώ σε αυτό το παράδειγμα μπορούμε να παρακάμψουμε ένα στοιχείο κάθετα με skewY:

Δείτε την εξήγηση Pen Transform από CSS-Tricks (@ css-tricks) στο CodePen.

Τώρα ας χρησιμοποιήσουμε skew()για να συνδυάσουμε τα δύο:

Δείτε την
ιδιότητα στυλό Pen ) (CSS-Tricks (@ css-tricks)
στο CodePen.

Γυρίζω

.element ( transform: rotate(25deg); )

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

Δείτε την εξήγηση Pen Transform από CSS-Tricks (@ css-tricks) στο CodePen.

Μπορούμε επίσης να χρησιμοποιήσουμε τα rotateX, rotateYκαι rotateZλειτουργίες, όπως έτσι:

Δείτε την εξήγηση Pen Transform από CSS-Tricks (@ css-tricks) στο CodePen.

Μεταφράζω

.element ( transform: translate(20px, 10px); )

Αυτή η συνάρτηση μετασχηματισμού μετακινεί ένα στοιχείο πλάγια ή πάνω και κάτω. Γιατί να μην χρησιμοποιείτε μόνο πάνω / αριστερά / κάτω / δεξιά; Λοιπόν, είναι μερικές φορές συγκεχυμένο. Θα τα θεωρούσα ως διάταξη / τοποθέτηση (έχουν καλύτερη υποστήριξη προγράμματος περιήγησης ούτως ή άλλως) και αυτό ως τρόπο να μετακινήσετε αυτά τα πράγματα ως μέρος μιας μετάβασης ή κινούμενης εικόνας.

Αυτές οι τιμές θα έχουν οποιαδήποτε τιμή μήκους, όπως 10px ή 2.4em. Μία τιμή θα μετακινήσει το στοιχείο προς τα δεξιά (αρνητικές τιμές προς τα αριστερά). Εάν παρέχεται μια δεύτερη τιμή, αυτή η δεύτερη τιμή θα την μετακινήσει προς τα κάτω (αρνητικές τιμές επάνω). Εναλλακτικά, μπορείτε να βρείτε συγκεκριμένα:

transform: translateX(value); transform: translateY(value);

Είναι σημαντικό να σημειωθεί ότι ένα στοιχείο που χρησιμοποιεί transformδεν θα προκαλέσει τη ροή άλλων στοιχείων γύρω από αυτό. Χρησιμοποιώντας την translateπαρακάτω συνάρτηση και ωθώντας το πράσινο τετράγωνο από την αρχική του θέση, θα παρατηρήσουμε πώς το περιβάλλον κείμενο θα παραμείνει σταθερό στη θέση του, σαν το τετράγωνο να είναι ένα στοιχείο μπλοκ:

Δείτε την εξήγηση Pen Transform από CSS-Tricks (@ css-tricks) στο CodePen.

Αξίζει επίσης να σημειωθεί ότι το translateυλικό θα επιταχυνθεί εάν θέλετε να κινούσετε αυτήν την ιδιότητα, σε αντίθεση με position: absolute.

Πολλαπλές τιμές

Με μια λίστα χωρισμένη με χώρο, μπορείτε να προσθέσετε πολλές τιμές στην transformιδιότητα:

.element ( width: 20px; height: 20px; transform: scale(20) skew(-20deg); )

Αξίζει να σημειωθεί ότι υπάρχει μια σειρά με την οποία θα πραγματοποιηθούν αυτοί οι μετασχηματισμοί, στο παραπάνω παράδειγμα το «skew» θα εκτελεστεί πρώτα και στη συνέχεια το στοιχείο θα κλιμακωθεί.

Μήτρα

Η matrixσυνάρτηση μετασχηματισμού μπορεί να χρησιμοποιηθεί για το συνδυασμό όλων των μετασχηματισμών σε ένα. Είναι λίγο σαν μετασχηματισμός στενογραφίας, μόνο δεν πιστεύω ότι προορίζεται πραγματικά να γραφτεί με το χέρι. Υπάρχουν εργαλεία εκεί έξω, όπως το The Matrix Resolutions, τα οποία μπορούν να μετατρέψουν μια ομάδα μετασχηματισμών σε μία δήλωση matrix. Ίσως σε ορισμένες περιπτώσεις, αυτό μπορεί να μειώσει το μέγεθος του αρχείου, αν και οι μικρο-βελτιστοποιημένες μικρο-βελτιστοποιήσεις όπως αυτές πιθανώς δεν αξίζουν τον χρόνο σας.

Για τους περίεργους, αυτό:

rotate(45deg) translate(24px, 25px)

μπορεί επίσης να αναπαρασταθεί ως:

matrix(0.7071067811865475, 0.7071067811865476, -0.7071067811865476, 0.7071067811865475, -0.7071067811865497, 34.648232278140824)

3D μετασχηματισμούς

Οι περισσότερες από τις παραπάνω ιδιότητες έχουν τρισδιάστατες εκδόσεις αυτών.

translate3d(x, y, z) translateZ(z)

Η τρίτη τιμή translate3dή η τιμή σε translateZμετακίνηση του στοιχείου προς τον θεατή, οι αρνητικές τιμές απομακρύνονται.

scale3d(sx, sy, sz) scaleZ(sz)

Η τρίτη τιμή μέσα scale3dή η τιμή scaleZεπηρεάζει την κλιμάκωση κατά μήκος του άξονα z (π.χ. η φανταστική γραμμή που βγαίνει κατευθείαν από την οθόνη).

rotateX(value) rotateY(value) rotate3d(x, y, z)

rotateXκαι rotateYθα περιστρέψει ένα στοιχείο σε 3D χώρο γύρω από αυτούς τους άξονες. rotate3dσας επιτρέπει να καθορίσετε ένα σημείο σε χώρο 3D στον οποίο μπορείτε να περιστρέψετε το στοιχείο γύρω.

matrix3d(… )

Ένας τρόπος για να περιγράψετε μέσω προγραμματισμού ένα 3D μετασχηματισμό σε ένα πλέγμα 4 × 4. Κανείς δεν θα γράψει ποτέ ένα από αυτά, ποτέ.

perspective(value)

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

Περισσότερες πληροφορίες

• Έγγραφα MDN για μετασχηματισμό και χρήση.
• Η τεκμηρίωση του David DeSandro για 3D μετασχηματισμούς
• Surfin 'Safari: 3D μετασχηματισμούς
• W3C προδιαγραφές σε CSS3 μετασχηματισμούς
• Εισαγωγή σε μετασχηματισμούς 3D CSS

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

2D Μετασχηματισμοί

Χρώμιο	Σαφάρι	Firefox	ΛΥΡΙΚΗ ΣΚΗΝΗ	ΙΕ	Android	iOS
Οποιος	3.1+	3.5+	10.5+	9+	4.1+	Τουλάχιστον 4

3D μετασχηματισμούς

Χρώμιο	Σαφάρι	Firefox	ΛΥΡΙΚΗ ΣΚΗΝΗ	ΙΕ	Android	iOS
10+	4+	12+	κανένας	10+	4.1+	5+

Προθέματα προμηθευτή

.element ( -webkit-transform: value; -moz-transform: value; -ms-transform: value; -o-transform: value; transform: value; )