• Μετάφραση

Γεια σου, αγαπητέ 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 pixel)

Πάμε κάτω

Όπως ίσως μαντέψατε, για να μετακινήσετε ένα αντικείμενο προς τα κάτω, η συντεταγμένη Υ πρέπει να είναι θετική και η συντεταγμένη Χ πρέπει να είναι 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: Διαγώνια κίνηση

Για να μετακινήσουμε ένα αντικείμενο διαγώνια, θα συνδυάσουμε τις παραμέτρους ΧΚαι y. Η σύνταξη θα είναι η εξής: transform: translate(x,y).Ανάλογα με την κατεύθυνση, η τιμή ΧΚαι 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 το ύψος.
Ας δούμε το παρακάτω παράδειγμα.

• Μετάφραση

Γεια σου, αγαπητέ 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 pixel)

Πάμε κάτω

Όπως ίσως μαντέψατε, για να μετακινήσετε ένα αντικείμενο προς τα κάτω, η συντεταγμένη Υ πρέπει να είναι θετική και η συντεταγμένη Χ πρέπει να είναι 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: Διαγώνια κίνηση

Για να μετακινήσουμε ένα αντικείμενο διαγώνια, θα συνδυάσουμε τις παραμέτρους ΧΚαι y. Η σύνταξη θα είναι η εξής: transform: translate(x,y).Ανάλογα με την κατεύθυνση, η τιμή ΧΚαι 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 το ύψος.
Ας δούμε το παρακάτω παράδειγμα.
2.
2.

Περιστρέψτε ένα στοιχείο χρησιμοποιώντας CSS 3

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

Κωδικός CSS

#rotate_element (
-webkit-transform: rotate(90deg); // περιστρέψτε το στοιχείο για διαφορετικά προγράμματα περιήγησης



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

Στοίχιση και κατεύθυνση κειμένου με χρήση CSS 3

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

lr-tbτο κείμενο κατευθύνεται από αριστερά προς τα δεξιά.
rl-tbτο κείμενο κατευθύνεται από τα δεξιά προς τα αριστερά.
tb-rlΤο κείμενο κατευθύνεται κάθετα και στοιχίζεται επάνω και δεξιά.
bt-rlτο κείμενο κατευθύνεται κάθετα και στοιχίζεται στο κάτω και στη δεξιά άκρη.
tb-lrΤο κείμενο κατευθύνεται κάθετα και στοιχίζεται επάνω και αριστερά.
bt-lrτο κείμενο κατευθύνεται κατακόρυφα και στοιχίζεται στο κάτω και στο αριστερό άκρο.
Χρησιμοποιώντας το παράδειγμα της φράσης το κείμενο πηγαίνει εδώμπορείτε να εξετάσετε την επίδραση των ιδιοτήτων CSS

Κωδικός CSS

Κείμενο(
λειτουργία εγγραφής: lr-tb; /* το κείμενο κατευθύνεται από αριστερά προς τα δεξιά */
}

Κείμενο 1(
λειτουργία γραφής: rb-tb; /* το κείμενο κατευθύνεται από τα δεξιά προς τα αριστερά */
}

Παράδειγμα περιστροφής κειμένου κατά 90 μοίρες και ευθυγράμμισης κειμένου CSS 3

Εδώ είναι ένα ολοκληρωμένο παράδειγμα. Περιστρέψτε το κείμενο κατά 90 μοίρες. Για να το κάνετε αυτό, απλώς δημιουργήστε ένα μπλοκ με το αναγνωριστικό rotateText και ορίστε τις ιδιότητές του CSS.

Κώδικας HTML και CSS

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

Η συνάρτηση 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 με τους μετασχηματισμούς περιστροφής σάς επιτρέπει να δημιουργήσετε όμορφα δυναμικά εφέ.

Σήμερα θα δούμε ένα τόσο υπέροχο εφέ που είναι διαθέσιμο σε εμάς χάρη στο CSS3. Μιλάμε για περιστροφή μπλοκ ή εικόνας. Ταιριάζει εκπληκτικά στη διεπαφή του ιστότοπου και, έχοντας κατακτήσει αυτό το μάθημα, θα μπορείτε να εφαρμόσετε αυτό το εφέ στα έργα σας.

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

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

Flip-container ( -webkit-perspective:1000; -moz-perspective:1000; -ms-perspective:1000; view:1000; )

Μπορείτε να καθορίσετε οποιονδήποτε άλλο αριθμό. Πειραματιστείτε μόνοι σας. Το μπροστινό (.μπροστά) και το πίσω μέρος (.πίσω) του τραπουλόχαρτου μας πρέπει να τοποθετηθούν απολύτως έτσι ώστε να «επικαλύπτονται» το ένα το άλλο στην τελική τους θέση. Πρέπει επίσης να βεβαιωθούμε ότι η πίσω πλευρά των αναποδογυρισμένων στοιχείων δεν εμφανίζεται κατά τη διάρκεια της κινούμενης εικόνας. Η ιδιότητα backface-visibility θα μας βοηθήσει σε αυτό:

Εμπρός, .πίσω ( -webkit-backface-visibility:hidden; -moz-backface-visibility:hidden; -ms-backface-visibility:hidden; backface-visibility:hidden; πλάτος:100%; ύψος:100%; θέση: απόλυτο: 0;

Ας ορίσουμε τον δείκτη z για την μπροστινή πλευρά (έτσι ώστε να βρίσκεται στην κορυφή στην προεπιλεγμένη κατάσταση) και ας περιγράψουμε τις προεπιλεγμένες γωνίες περιστροφής σε σχέση με τον κατακόρυφο άξονα:

/* η μπροστινή πλευρά τοποθετείται πάνω από την πίσω πλευρά */ .front ( -webkit-transform: rotateY(0deg); -moz-transform:rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg) ; rotateY(0deg); -transform: rotateY(180deg) -ms-transform: rotateY(180deg);

Όταν αιωρούνται, οι κάρτες μας θα περιστρέφονται, οι γωνίες των πλευρών τους θα αλλάξουν από 0 σε 180 μοίρες και από 180 μοίρες σε 0:

/* η μπροστινή πλευρά τοποθετείται πάνω από την πίσω πλευρά */ .flip-container:hover .front (transform: rotateY(180deg); -webkit-transform:rotateY(180deg); -moz-transform:rotateY(180deg); - ms-transform: rotateY(180deg): -o-transform: rotateY(180deg), αρχικά κρυφή πλευρά */ .flip-container:hover .back ( -webkit-transform: rotateY(0deg); -moz-); μετασχηματισμός: rotateY (0deg) -ms-transform: rotateY(0deg);

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

Flipper ( -webkit-transform-style: ruaj-3d; -moz-transform-style: ruaj-3d; -ms-transform-style: ruaj-3d; -o-transform-style:preserve-3d; transform-style: διατήρηση-3δ)

Ούρα, τα καταφέραμε. Μόλις μάθαμε πώς να κάνουμε περιστροφή χρησιμοποιώντας CSS. Το καλύτερο μέρος είναι ότι όλα τα σύγχρονα προγράμματα περιήγησης το υποστηρίζουν. Ναι, ναι, οι χρήστες στον Internet Explorer μπορούν επίσης να δουν αυτήν την ομορφιά ξεκινώντας από την έκδοση 10. Δυστυχώς, στη Ρωσία υπήρξε μια φαύλος πρακτική να σύρεται κατά μήκος μια σειρά απαρχαιωμένων IE8 και IE9. Έτσι, ο πελάτης μου ήθελε μια επεξήγηση εργαλείου που θα εμφανίζεται σε παλαιότερα προγράμματα περιήγησης τη στιγμή του ποντικιού. Ας δούμε τι μπορούμε να κάνουμε.

Το πρώτο πράγμα που σας έρχεται στο μυαλό είναι να χρησιμοποιήσετε την οδηγία @supports. Θα μπορούσαμε να γράψουμε:

@supports (transform-style: ruaj-3d) ή (-moz-transform-style: ruaj-3d) ή (-webkit-transform-style: ruaj-3d) ( /* στυλ για προγράμματα περιήγησης που υποστηρίζουν */ /* 3D μετασχηματίζει */ )

Δυστυχώς, ακόμη και ο IE 11 δεν γνωρίζει τίποτα γι 'αυτό, οπότε θα χρησιμοποιήσουμε τον παλιομοδίτικο τρόπο:

Στο αρχείο ie.css θα περιγράψουμε τα στυλ που είναι απαραίτητα για την επεξήγηση εργαλείου μας. Δεν θα το παρουσιάσω εδώ γιατί... είναι πέρα ​​από το πεδίο αυτού του άρθρου (και δεν υπάρχει τίποτα ενδιαφέρον εκεί). Εάν θέλετε, μπορείτε να το δείτε στο παράδειγμά μας κατακόρυφης περιστροφής χρησιμοποιώντας CSS. Τι γίνεται όμως αν μας ενδιαφέρει η οριζόντια περιστροφή; Σε αυτήν την περίπτωση, ο κώδικάς μας μετασχηματίζεται ως εξής:

Vertical.flip-container ( position: σχετική; ) .vertical.flip-container .flipper ( -webkit-transform-origin: 100% 213,5px; -moz-transform-origin: 100% 213,5px; -ms-transform-origin : 100% 213,5 px; 100% 213,5 px .vertical.flip-container:hover .back, .vertical.flip-container.hover .back ( -webkit-transform: rotateX(0deg); -moz; μετασχηματισμός: rotateX(0deg); -o-transform: rotateX(0deg); hover .front ( -webkit-transform: rotateX(180deg); -moz-transform: rotateX(180deg); -o-transform: rotateX(180deg); -ms-transform: rotateX(180deg); transformation: rotateX(180deg)) ;