Η ιδιότητα μετασχηματισμού CSS (από τη λέξη "μετασχηματισμός") σας επιτρέπει να τροποποιήσετε ένα στοιχείο σε σελίδες HTML. Για παράδειγμα, μπορείτε

• γυρίζω
• εκτοπίζω
• αλλαγή κλίμακας
• κλίση
• συνδυάστε τα παραπάνω βήματα

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

1. Σύνταξη μετασχηματισμού CSS

transform : transform1 [transform2 ];

Επιτρέπονται πολλές ενέργειες με ένα αντικείμενο ταυτόχρονα (για παράδειγμα, περιστροφή, μετατόπιση και αλλαγή της κλίμακας).

Μια σημείωση για τα προγράμματα περιήγησης

Δεν υποστηρίζουν όλα τα προγράμματα περιήγησης τον μετασχηματισμό. Πρέπει να χρησιμοποιήσετε προθέματα προμηθευτή CSS:

• -ms-transform - για IE9 και παλαιότερα (κάτω από την έκδοση 9, ο μετασχηματισμός δεν υποστηρίζεται
• -webkit-transform - για Chrome, Safari, Android και iOS
• -o-transform - για Opera έως την έκδοση 12.10
• -moz-transform - για Firefox έως την έκδοση 16.0

2. transform:rotate(x) - περιστροφή αντικειμένου

Για να περιστρέψετε ένα στοιχείο υπάρχει η εντολή rotate(x) . Σας επιτρέπει να περιστρέψετε ένα αντικείμενο x μοίρες δεξιόστροφα ή αριστερόστροφα. Η τιμή x πρέπει να προσδιορίζεται σε βαθμούς deg

Παράδειγμα #1. Περιστροφή αντικειμένου σε html μέσω μετασχηματισμού

ύψος: 100 px;

φόντο :#444 ;

περιθώριο :30 px ;

-ms-transform : περιστροφή (20 deg ); -webkit-transform : περιστροφή (20 μοίρες)-o-transform : περιστροφή (20 deg );

-moz-transform : περιστροφή (20 μοίρες);

μετασχηματισμός: περιστροφή (20 μοίρες);

ύψος: 100 px;

φόντο :#888 ;

περιθώριο :30 px ;

-ms-transform : περιστροφή (20 deg ); -webkit-transform : περιστροφή (20 μοίρες)-o-transform : περιστροφή (20 deg );

ύψος: 100 px;

)

Η σελίδα μετατρέπεται στην ακόλουθη

Αλλά αυτή η περιστροφή συμβαίνει απότομα και δεν φαίνεται «θεαματική». Αυτό μπορεί να διορθωθεί εύκολα με εξομάλυνση. Το παρακάτω παράδειγμα θα εφαρμόσει κινούμενα σχέδια.

Παράδειγμα #3. Ομαλή περιστροφή στο hover (animation) σε html

ύψος: 100 px;

σε αυτό το παράδειγμα

η απλούστερη περίπτωση θεωρείται με μετάβαση σε 1 δευτερόλεπτο με γραμμική ταχύτητα γραμμική

Εάν πρέπει να εφαρμόσετε έναν μετασχηματισμό μόνο κατά μήκος ενός από τους άξονες, τότε μπορείτε να χρησιμοποιήσετε μια πιο ειδική περίπτωση: translateX(x) - X offset, translateY(y) - Y offset.

4. transform:scale(x,y) - κλιμάκωση αντικειμένου

Η εντολή για την κλιμάκωση ενός αντικειμένου είναι scale(x,y) , όπου τα ορίσματα στις παρενθέσεις είναι η κλίμακα κατά μήκος των αξόνων X και Y, αντίστοιχα.

Παράδειγμα #5. Κλιμάκωση αντικειμένων σε html

ύψος: 100 px;

Όταν αιωρείται, το τετράγωνο γίνεται μεγαλύτερο οριζόντια κατά 50% (συντελεστής 1,5) και κατακόρυφα κατά 30% (συντελεστής 1,3). Η τιμή 1 σημαίνει ότι δεν υπάρχει κλιμάκωση. Οτιδήποτε λιγότερο από 1 σημαίνει ότι το αντικείμενο γίνεται μικρότερο.

η απλούστερη περίπτωση θεωρείται με μετάβαση σε 1 δευτερόλεπτο με γραμμική ταχύτητα γραμμική

Εάν πρέπει να εφαρμόσετε έναν μετασχηματισμό μόνο κατά μήκος ενός από τους άξονες, τότε μπορείτε να χρησιμοποιήσετε μια πιο ειδική περίπτωση: κλίμακαX(x) - κλιμάκωση κατά μήκος X, κλίμακαY(y) - κλίμακα κατά μήκος Y.

5. μετασχηματισμός:λοξή - κλίση αντικειμένου

Η εντολή για την κλίση ενός αντικειμένου είναι skew(x,y) , όπου τα ορίσματα στις παρενθέσεις είναι η κλίση κατά μήκος των αξόνων X και Y, αντίστοιχα. Η κλίση πρέπει να προσδιορίζεται σε βαθμούς deg.

Παράδειγμα #6. Στρεβλώσεις αντικειμένων σε html

ύψος: 100 px;

Όταν αιωρείται, το τετράγωνο μεταμορφώνεται σε διαμάντι χάρη στην κλίση.

η απλούστερη περίπτωση θεωρείται με μετάβαση σε 1 δευτερόλεπτο με γραμμική ταχύτητα γραμμική

Εάν χρειάζεται να εφαρμόσετε έναν μετασχηματισμό μόνο κατά μήκος ενός από τους άξονες, τότε μπορείτε να χρησιμοποιήσετε μια πιο ειδική περίπτωση: skewX(x) - κλίση στο X, skewY(y) - κλίση στο Y.

6. Συνδυασμός τιμών μετασχηματισμού

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

Παράδειγμα #7. Συνδυασμός τιμών μετασχηματισμού

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

ύψος: 100 px;

7. Άλλες τιμές μετασχηματισμού

Εξετάσαμε τις πιο βασικές τιμές μετασχηματισμού. Ας εξετάσουμε άλλες πιθανότητες.

• κανένας - κανένας μετασχηματισμός (είναι ενεργοποιημένος από προεπιλογή).
• matrix(x,x,x,x,x,x) - 2D μετασχηματισμός με χρήση πίνακα 6 τιμών.
• matrix3d(x,x,x,x,x,x,x,x,x,x,x,x,x,x,x,x)- Τρισδιάστατος μετασχηματισμός με χρήση πίνακα 16 τιμών.
• translate3d(x,y,z) - 3d translation (σε σύγκριση με κανονική κίνηση, εδώ έχει προστεθεί μια τρίτη συντεταγμένη).
• scale3d(x,y,z) - κλιμάκωση σε 3d (σε σύγκριση με την κανονική κλίμακα, μια τρίτη συντεταγμένη προστίθεται εδώ).
• rotate3d(x,y,z) - περιστροφή σε 3d (σε σύγκριση με την κανονική περιστροφή, μια τρίτη συντεταγμένη προστίθεται εδώ).
• rotateX(x) - 3d περιστροφή κατά μήκος του άξονα Χ.
• rotateY(x) - 3d περιστροφή κατά μήκος του άξονα Y.
• rotateZ(x) - 3d περιστροφή κατά μήκος του άξονα Z.
• προοπτική(n) - προοπτική για τον μετασχηματισμό του τρισδιάστατου στοιχείου.

Στο JavaScript, η ιδιότητα μετασχηματισμού CSS είναι διαθέσιμη μέσω των ακόλουθων ιδιοτήτων:

object.style.transform="Transformation" document.getElementById("elementID").style.transform = ""

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

Η συνάρτηση rotate() στο CSS εκτελεί έναν δισδιάστατο μετασχηματισμό περιστροφής σε ένα στοιχείο γύρω από ένα σταθερό κέντρο. Σε αυτήν την περίπτωση, το μπλοκ δεν παραμορφώνεται και δεν επηρεάζει τη θέση των γειτονικών κοντέινερ HTML. Η μέθοδος σάς επιτρέπει να καθορίσετε τη γωνία περιστροφής. Επιπλέον, είναι δυνατό να ορίσετε ένα αυθαίρετο κέντρο περιστροφής.

Μετασχηματισμός μπλοκ

Στο CSS, η rotate() είναι μια συνάρτηση μετασχηματισμού, επομένως πρέπει να μεταβιβαστεί στην ιδιότητα μετασχηματισμού του στοιχείου.

Στοιχείο (μετασχηματισμός: περιστροφή (45 μοίρες); )

Το πρώτο και μοναδικό όρισμα είναι η γωνία με την οποία θα περιστραφεί το αντικείμενο. Η περιστροφή πραγματοποιείται σε δισδιάστατο χώρο. Για τρισδιάστατους μετασχηματισμούς, υπάρχουν οι συναρτήσεις CSS rotateX(), rotateY(), rotateZ() και rotate3d().

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

Γωνία περιστροφής

Το όρισμα γωνίας που μεταβιβάζεται στη μέθοδο πρέπει να είναι τύπου CSS . Αποτελείται από μια αριθμητική τιμή και μια μονάδα μέτρησης deg (από το αγγλικό πτυχίο - πτυχίο).

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

Κέντρο περιστροφής

Από προεπιλογή, το μπλοκ περιστρέφεται γύρω από το γεωμετρικό του κέντρο. Για να αλλάξετε αυτό το σημείο, πρέπει να χρησιμοποιήσετε την ιδιότητα transform-origin.

Κατά κανόνα, απαιτούνται τρεις παράμετροι που καθορίζουν τις συντεταγμένες κατά μήκος των αξόνων X, Y και Z, αλλά επειδή η rotate() στο CSS είναι ένας δισδιάστατος μετασχηματισμός, θα είναι αρκετό να περάσει μόνο δύο τιμές.

Στοιχείο (μετασχηματισμός: περιστροφή (45 μοίρες); προέλευση μετασχηματισμού: 20 εικονοστοιχεία 100%; )

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

Κινούμενα σχέδια περιστροφής

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

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

Στοιχείο ( μετάβαση: μετασχηματισμός 2s; ) στοιχείο:hover (μετασχηματισμός: περιστροφή (180 μοίρες); )

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

Ένας πιο περίπλοκος τρόπος για να κινήσετε ένα αντικείμενο είναι να ορίσετε τη σειρά πλαισίων του χρησιμοποιώντας ιδιότητες και τον κανόνα @keyframes.

Στοιχείο ( animation-name: rotate; animation-duration: 2s; animation-iteration-count: infinite; animation-timing-function: linear; ) @keyframes rotate ( from ( transform: rotate(0deg); ) to (transform: rotate (360 μοίρες);

Μια περιστρεφόμενη κίνηση εφαρμόζεται στο καθορισμένο στοιχείο, εκτελώντας μια πλήρη περιστροφή από 0 έως 360 μοίρες σε δύο δευτερόλεπτα. Η ιδιότητα animation-iting-count ορίζει την κίνηση να επαναλαμβάνεται επ' αόριστον και η συνάρτηση animation-timing-count ορίζει το εφέ ομαλής μετάβασης. Ο συνδυασμός της ιδιότητας in με μετασχηματισμούς περιστροφής σάς επιτρέπει να δημιουργήσετε όμορφα δυναμικά εφέ.

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

Αντικατάσταση κειμένου με εικόνα

Η πιο πρωτόγονη λύση σε αυτό το πρόβλημα θα ήταν η χρήση μιας εικόνας. Χρησιμοποιώντας το γνωστό πρόγραμμα Adobe Photoshop, το κείμενο μπορεί εύκολα να περιστραφεί σε οποιαδήποτε γωνία. Όπως μπορείτε να φανταστείτε, δεν χρειάζεται πολλή ευφυΐα για να χρησιμοποιήσετε αυτήν τη μέθοδο.

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

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

Παρά το γεγονός ότι υπάρχουν τόσες πολλές αρνητικές πτυχές της χρήσης εικόνων, η μέθοδος έχει μερικά θετικά αποτελέσματα.

• Συμβατότητα μεταξύ προγραμμάτων περιήγησης– κανένα πρόβλημα κατά την εμφάνιση σε διαφορετικά προγράμματα περιήγησης.
• Υψηλή ικανότητα στην τοποθέτηση εικόνας.

Ωστόσο, σε αυτή την περίπτωση οι αρνητικές πτυχές υπερτερούν. Σας συμβουλεύω να στραφείτε σε άλλες λύσεις.

Χρησιμοποιώντας την ιδιότητα μετασχηματισμού CSS

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

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

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

Container ( - moz- transform: rotate(- 45deg) ; - webkit- transform: rotate(- 45deg) ; - o-transform: rotate(- 45deg) ; -ms-transform: rotate(- 45deg) ; transformation: rotate( - 45 μοίρες);

Ως αποτέλεσμα, παίρνουμε κάτι σαν αυτό:

Αναφέρομαι σε αυτήν την ιδιότητα, η σχεδίαση θα εμφανίζεται χωρίς προβλήματα σε Firefox, Opera, Internet Explorer και άλλα προγράμματα περιήγησης webkit.

Χειρισμός μέσω Javascript

Η ουσία της διαδικασίας είναι εντελώς παρόμοια με τη μέθοδο που συζητήθηκε προηγουμένως. Για να το εφαρμόσετε, χρειάζεστε ελάχιστες γνώσεις κώδικα js, μαθηματικά και κατανόηση του φίλτρου Matrix.

Javascript

var deg2radians = Μαθ. PI * 2 / 360, μοίρες = - 4; rad = deg * deg2radians, costeta = Math. cos (rad) , sintheta = Ματθ. sin(rad); jQuery(".rotatedBlock") . css(( φίλτρο: "progid:DXImageTransform.Microsoft.Matrix (M11="} ) ;

+ costheta+ ", M12=" + (- 1 ) * sintheta+ ", M21=" + sintheta+ ", M22=" + costheta+

", SizingMethod="auto expand", enabled=true)"

Ως αποτέλεσμα, έχουμε την ίδια εικόνα στο πρόγραμμα περιήγησης όπως όταν χρησιμοποιούμε την ιδιότητα μετασχηματισμού.

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

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

Μια πιο σύνθετη και προσαρμοσμένη προσέγγιση είναι η χρήση της ιδιότητας transform-origin. Η ουσία αυτής της τεχνικής θα περιγραφεί σε επόμενα άρθρα.

Η επόμενη διαφορά έγκειται στην ουσία της ίδιας της στροφής. Όταν χρησιμοποιείτε κώδικα js, το σημείο περιστροφής βρίσκεται στην άκρη του μπλοκ. Στη δεύτερη μέθοδο, αυτό το σημείο βρίσκεται στο κέντρο του στοιχείου. Για να γίνει πιο κατανοητό, δείτε την παρακάτω εικόνα

Μετάφραση: Vlad Merzhevich

Η κλιμάκωση, η κλίση και η περιστροφή οποιουδήποτε στοιχείου είναι δυνατή χρησιμοποιώντας Ιδιότητες CSS 3 μετασχηματισμός. Υποστηρίζεται από όλους σύγχρονα προγράμματα περιήγησης(με προθέματα) και επιτρέπει τη χαριτωμένη υποβάθμιση, για παράδειγμα:

#myelement ( -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg); transformation: rotate(30deg); )

Καλά πράγματα. Ωστόσο, ολόκληρο το στοιχείο περιστρέφεται - το περιεχόμενό του, τα σύνορά του και εικόνα φόντου. Τι να κάνετε αν θέλετε μόνο να στρίψετε εικόνα φόντου? Ή έτσι ώστε το φόντο να παραμένει στη θέση του, αλλά το στοιχείο να περιστρέφεται;

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

Ευτυχώς, υπάρχει λύση. Ουσιαστικά, αυτό είναι ένα hack που προσθέτει μια εικόνα φόντου στο ψευδοστοιχείο :before ή :after και όχι στο γονικό κοντέινερ. Το ψευδοστοιχείο μπορεί να μεταμορφωθεί ανεξάρτητα.

Μεταμόρφωση μόνο του φόντου

Το κοντέινερ δεν χρειάζεται να έχει στυλ, αλλά πρέπει να ορίσει τη θέση: σχετική αφού το ψευδοστοιχείο μας είναι τοποθετημένο μέσα. Ορίστε επίσης υπερχείλιση: κρυφό , διαφορετικά το φόντο θα επεκταθεί πέρα ​​από το κοντέινερ.

#myelement (θέση: σχετική, υπερχείλιση: κρυφή; )

Τώρα μπορούμε να δημιουργήσουμε ένα απολύτως τοποθετημένο ψευδοστοιχείο με μετασχηματιζόμενο φόντο. Ορίζουμε την ιδιότητα z-index σε -1, αυτό διασφαλίζει ότι το φόντο εμφανίζεται κάτω από τα περιεχόμενα του κοντέινερ.

#myelement:before ( περιεχόμενο: ""; θέση: απόλυτη; πλάτος: 200%; ύψος: 200%; επάνω: -50%; αριστερά: -50%; z-index: -1; φόντο: url(background.png ) 0 0 επανάληψη -webkit-transform: rotate(30deg) ;

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

Διορθώνοντας το φόντο των μετασχηματιζόμενων στοιχείων

Τυχόν μετασχηματισμοί στο μητρικό κοντέινερ εφαρμόζονται επίσης στα ψευδοστοιχεία. Πρέπει λοιπόν να αναιρέσουμε τον μετασχηματισμό, για παράδειγμα, εάν το δοχείο περιστραφεί 30 μοίρες, το φόντο θα πρέπει να περιστραφεί -30 μοίρες έτσι ώστε να καταλήξει σε μια σταθερή θέση:

#myelement ( θέση: σχετική; υπερχείλιση: κρυφό; -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg) ; 1; φόντο: url(background.png) 0 -webkit-transform: rotate(-30deg); )

Και πάλι, πρέπει να προσαρμόσετε το μέγεθος και τη θέση έτσι ώστε το φόντο να ταιριάζει επαρκώς στο γονικό κοντέινερ.

Παρακαλώ, για παράδειγμα. Ο πλήρης κώδικας αποθηκεύεται σε HTML.

Το εφέ λειτουργεί σε IE9, Firefox, Chrome, Safari και Opera. Το IE8 δεν θα εμφανίσει μετασχηματισμό, αλλά θα εμφανιστεί το φόντο.

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

• Μετάφραση

Γεια σου, αγαπητέ habrafriend! Υπάρχουν πολλά παραδείγματα στο διαδίκτυο εξαιρετικών χρήσεων μετασχηματισμών και μεταβάσεων στο CSS3. Σε αυτό το άρθρο, θα εξετάσουμε τα βασικά του CSS3 και θα μάθουμε πώς να δημιουργήσουμε κάτι τέτοιο. Αυτό το σεμινάριο θα είναι χρήσιμο για όσους έχουν μόλις αρχίσει να εξοικειώνονται με το CSS3. Ας ξεκινήσουμε!

Σύστημα συντεταγμένων

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


Ωστόσο, το σύστημα συντεταγμένων μας έχει μια ιδιαιτερότητα: ο άξονας Υ κατευθύνεται προς την αντίθετη κατεύθυνση από το συνηθισμένο. Γιατί; Το γεγονός είναι ότι η HTML και η CSS (μαζί, για παράδειγμα, το ActionScript) χρησιμοποιούν ένα σύστημα αντίστροφων συντεταγμένων, καθώς η ιστοσελίδα ξεκινά από την επάνω αριστερή γωνία και κατεβαίνει προς τα κάτω.
Σημείωμα:Θα υποθέσουμε ότι είστε ήδη εξοικειωμένοι Δομή HTMLκαι CSS. Θα παραλείψω τις επεξηγήσεις σχετικά με τον τρόπο ρύθμισης αρχείο CSS, πώς να τοποθετήσετε εικόνες κ.λπ. Θα εστιάσουμε στην κίνηση εικόνων. Εάν δεν είστε σίγουροι ποιες είναι οι δεξιότητές σας υψηλό επίπεδο, τότε σας προτείνουμε να ρίξετε μια ματιά στην πορεία των μαθημάτων "HTML και CSS σε 30 ημέρες" (δωρεάν και αγγλικός) για να μάθετε όλα όσα χρειάζεστε.

1: Οριζόντια κίνηση

Η πρώτη κίνηση που θα δείξουμε είναι οριζόντια. Θα μετακινήσουμε αντικείμενα από αριστερά προς τα δεξιά και από δεξιά προς τα αριστερά.

Μετακίνηση προς τα δεξιά

Για να μετακινήσουμε ένα αντικείμενο θα χρησιμοποιήσουμε transform: translate(x,y), όπου Χ είναι θετικός αριθμός και Υ=0.


HTML
Ανοίξτε τον αγαπημένο σας επεξεργαστή κώδικα και πληκτρολογήστε τα εξής:

Ορίσαμε τρεις κατηγορίες για την εικόνα:

• αντικείμενο: Καθιέρωση των βασικών κανόνων του αντικειμένου μας.
• van: Θα χρησιμοποιήσουμε διαφορετικά αντικείμενα για να επιδείξουμε κάθε τύπο κινούμενης εικόνας.
• move-right: Χρησιμοποιώντας αυτήν την κλάση θα μετακινήσουμε το αντικείμενο μας.

CSS
Αρχικά, θα τοποθετήσουμε το αντικείμενο μας (την εικόνα του φορτηγού) στο κέντρο.
.object (θέση: απόλυτη; ) .van (πάνω: 45%; αριστερά: 44%; )
Σε αυτό το παράδειγμα, θα μετακινήσουμε το αντικείμενο 350 px προς τα δεξιά. Χρησιμοποιείται σύνταξη transform: translate(350px,0);. Επιπλέον, το αντικείμενο θα μετακινηθεί μόνο όταν τοποθετείτε το δείκτη του ποντικιού πάνω του: #axis:hover .move-right.

#axis:hover .move-right( transform: translate(350px,0); -webkit-transform: translate(350px,0); /** Chrome & Safari **/ -o-transform: translate(350px,0) ; /** Opera **/ -moz-transform: translate(350px,0)
Παράμετρος μετασχηματίζωαπλώς θα μετακινήσει το αντικείμενο από το ένα σημείο στο άλλο, αλλά δεν θα δημιουργήσει κινούμενη εικόνα δεδομένης κίνησης. Για να το διορθώσετε αυτό, πρέπει να προσθέσετε μια παράμετρο κίνησης στο class.object.

Αντικείμενο ( θέση: απόλυτη; μετάβαση: όλα τα 2s ease-in-out; -webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/ -moz-transition: all 2s ease-in-out ; /** Firefox **/ -o-transition: all 2s ease-in-out;
Αυτός ο κανόνας μετακίνησης θα πει στο πρόγραμμα περιήγησης να κάνει κίνηση Ολοιπαραμέτρους αντικειμένου ενεργοποιημένη 2 δευτερόλεπτα(χωρίς καθυστέρηση) χρησιμοποιώντας τη λειτουργία ευκολία εισόδου.
Μπορούμε να χρησιμοποιήσουμε 6 διαφορετικές λειτουργίες χρονισμού κίνησης:

• γραμμικός: Η κίνηση γίνεται με σταθερή ταχύτητα από την αρχή μέχρι το τέλος.
• ευκολία: Η κίνηση ξεκινά αργά και μετά ανεβάζει ταχύτητα.
• ευκολία: Η κίνηση αρχίζει αργά.
• ευκολία: Η κίνηση τελειώνει αργά.
• ευκολία εισόδου: Η κίνηση αρχίζει και τελειώνει αργά.
• κυβικά-μπεζιέρα: Προσδιορίστε με μη αυτόματο τρόπο την τιμή κίνησης.

Μετακίνηση αριστερά

Για να μετακινήσετε ένα αντικείμενο προς τα αριστερά, πρέπει απλώς να βάλετε μια αρνητική τιμή στον άξονα OH, ενώ Υπαραμένει αμετάβλητο. Στην περίπτωσή μας, θα μετακινήσουμε το αντικείμενο σε - 350 εικονοστοιχείαστα αριστερά.

HTML
Δημιουργώ νέο έγγραφο html και επικολλήστε τον παρακάτω κώδικα:

Αυτή τη φορά χρησιμοποιούμε την τάξη κίνηση-αριστεράγια να μετακινήσετε το αντικείμενο προς τα αριστερά.

CSS
Τώρα ας εισαγάγουμε -350 px για τον άξονα OX. transform: translate(-350px,0);- μετακινήστε το αντικείμενο προς τα αριστερά.
#axis:hover .move-left ( transform: translate(-350px,0); -webkit-transform: translate(-350px,0); /** Safari & Chrome **/ -o-transform: translate(-350px ,0) /** Opera **/ -moz-transform: translate(-350px,0)
Δεδομένου ότι έχουμε ήδη καθορίσει τους κανόνες κίνησης νωρίτερα, δεν χρειάζεται να το κάνουμε ξανά.

2: Κάθετη κίνηση

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

Προχωρώντας προς τα πάνω

HTML
Το πρότυπο HTML είναι πανομοιότυπο με τα προηγούμενα παραδείγματα. Ωστόσο, θα αντικαταστήσουμε το αντικείμενο μας με έναν πύραυλο (για λόγους σαφήνειας) και θα αντιστοιχίσουμε μια κλάση ανόδου.

CSS
Ακριβώς όπως το φορτηγό, θα τοποθετήσουμε τον πύραυλο στο κέντρο:
.rocket (πάνω: 43%; αριστερά: 44%; )
Όπως σημειώσαμε νωρίτερα, η συντεταγμένη Υ πρέπει να είναι αρνητική. Στην περίπτωσή μας, θα μετακινήσουμε το αντικείμενο 350 px προς τα πάνω.

#axis:hover .move-up ( transform: translate(0,-350px); -webkit-transform: translate(0,-350px); -o-transform: translate(0,-350px); -moz-transform: μετάφραση (0,-350 εικονοστοιχεία)

Πάμε κάτω

Όπως ίσως μαντέψατε, για να μετακινήσετε ένα αντικείμενο προς τα κάτω, η συντεταγμένη Y πρέπει να είναι θετική και η συντεταγμένη X πρέπει να είναι 0. Σύνταξη: translate(0,y);

HTML

CSS
#axis:hover .move-down ( transform: translate(0,350px); -webkit-transform: translate(0,350px); -o-transform: translate(0,350px); -moz-transform: translate(0,350px); )

3: Διαγώνια κίνηση

Για να μετακινήσουμε ένα αντικείμενο διαγώνια, θα συνδυάσουμε τις παραμέτρους xΚαι y. Η σύνταξη θα είναι η εξής: transform: translate(x,y).Ανάλογα με την κατεύθυνση, η τιμή xΚαι yμπορεί να είναι είτε θετική είτε αρνητική.

HTML

CSS
#axis:hover .move-ne ( transform: translate(350px,-350px); -webkit-transform: translate(350px,-350px); -o-transform: translate(350px,-350px); -moz-transform: μετάφραση (350px,-350px)

4: Περιστροφή

Η περιστροφή στο CSS3 ελέγχεται από συντεταγμένες μοιρών (από 0° έως 360°). Για να περιστρέψετε ένα αντικείμενο, εφαρμόστε τις ακόλουθες επιλογές: μετασχηματισμός: περιστροφή (ndeg); Οπου n- πτυχία.

Περιστροφή δεξιόστροφα

Για να περιστρέψετε ένα αντικείμενο δεξιόστροφα, εφαρμόστε μια θετική τιμή για περιστροφή (βαθμός).

HTML

CSS
#axis:hover .rotate360cw (transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg); )

Αριστερόστροφη περιστροφή

Για να περιστρέψετε ένα αντικείμενο αριστερόστροφα, εφαρμόστε μια αρνητική τιμή για περιστροφή (βαθμός).

HTML

CSS
#axis:hover .rotate360ccw (transform: rotate(-360deg); -webkit-transform: rotate(-360deg); -o-transform: rotate(-360deg); -moz-transform: rotate(-360deg); )

5: Κλιμάκωση

Η κλιμάκωση είναι ενδιαφέρον χαρακτηριστικό CSS3. Χρησιμοποιώντας την παράμετρο κλίμακα(n)ή παράμετρος κλίμακα (x,y), μπορούμε είτε να αυξήσουμε είτε να μειώσουμε το αντικείμενο απευθείας πλαίσιο HTML. Το αντικείμενο θα αλλάξει μέγεθος ανάλογα με την τιμή των n/x,y, όπου ο άξονας X είναι το πλάτος και ο άξονας Y το ύψος.
Ας δούμε το παρακάτω παράδειγμα.