Σε αυτό το άρθρο θα κατανοήσουμε το Transform In λεπτομερώς και ακολουθήστε με μια λεπτομερή πρακτική επίδειξη. Οι ακόλουθοι δείκτες θα καλυφθούν σε αυτό το άρθρο,
Με την πρόοδο στις λειτουργίες του ιστότοπου, είναι εξίσου σημαντικό να παρέχετε έξυπνες ενσωματώσεις στον ιστότοπό σας για να τον καταστήσετε ελκυστικό και καλύτερο. Η προσθήκη διαφόρων στοιχείων CSS που συμπληρώνουν τον ιστότοπό σας είναι η ανάγκη της ώρας.
Οι άνθρωποι παραμένουν εκτός ιστότοπων που δεν προσελκύουν πραγματικά τις μάζες. Λοιπόν, πώς να προσπαθήσετε να μεταμορφώσετε μερικά από τα στοιχεία και να ομορφύνετε το CSS σας με μικρότερη τιμή συμπίεσης.
Για την ικανοποίηση παρόμοιων αναγκών, έχουμε μεταμορφώσει την ιδιότητα CSS που μετασχηματίζει στοιχεία είτε με κλίση, περιστροφή, κλιμάκωση είτε μεταφράζοντας τα.
Προχωρώντας με αυτό το άρθρο σχετικά με το Transform In CSS
Τι είναι το Transform CSS;
Ο μετασχηματισμός ενός στοιχείου CSS σημαίνει να παρέχει ένα πλεονέκτημα σε μορφή 2D ή 3D. Αλλάζει οπτικά το στυλ ενός στοιχείου.
Ο 2D μετασχηματισμός λειτουργεί σε άξονες Χ και Υ. Μπορείτε να παρέχετε οποιοδήποτε άκρο ή δομή και στους δύο άξονες για να κάνετε αλλαγές. Ενώ για τρισδιάστατο μετασχηματισμό, πρέπει να εργαστεί σε άξονες X, Y καθώς και Z για να παρέχει το απαιτούμενο βάθος.
Ιδιότητες μετασχηματισμού CSS 2D:
δομές δεδομένων και αλγόριθμοι στο java tutorial
| Λειτουργία | Περιγραφή |
μήτρα( n, n, n, n, n, n ) | Πίνακας έξι τιμών |
μεταφράζω( x, ε ) | Επιτρέπει στο στοιχείο να κινείται κατά μήκος του άξονα X και Y |
μετάφρασηX ( ν ) | Επιτρέπει στο στοιχείο να κινείται κατά μήκος του άξονα Χ |
μετάφρασηY ( ν ) | Επιτρέπει στο στοιχείο να κινείται κατά μήκος του άξονα Υ |
κλίμακα( x, ε ) | Αλλάζει το πλάτος και το ύψος των στοιχείων |
κλίμακαX ( ν ) | Αλλάζει το πλάτος του στοιχείου |
κλίμακαY ( ν ) | Αλλάζει ένα ύψος στοιχείων |
γυρίζω( γωνία ) | Επιτρέπει την περιστροφή του στοιχείου σε γωνία που καθορίζεται στην παράμετρο |
λοξότητα( γ-γ, γ-γωνία ) | Ρυθμίζει το στοιχείο κατά μήκος του άξονα X και Y |
skewX ( γωνία ) | Ρυθμίζει το στοιχείο κατά μήκος του άξονα Χ |
λοξό ( γωνία ) | Ρυθμίζει το στοιχείο κατά μήκος του άξονα Υ |
Ιδιότητες μετασχηματισμού CSS 3D:
Ιδιοκτησία | Περιγραφή |
μεταμορφώνω | Εφαρμόζει έναν 2D ή 3D μετασχηματισμό σε ένα στοιχείο |
μετασχηματισμός | Σας επιτρέπει να αλλάξετε τη θέση στα μετασχηματισμένα στοιχεία |
μετασχηματισμός | Καθορίζει τον τρόπο απόδοσης των ένθετων στοιχείων σε χώρο 3D |
προοπτική | Καθορίζει την προοπτική για τον τρόπο προβολής των τρισδιάστατων στοιχείων |
προοπτική-προέλευση | Καθορίζει την κάτω θέση των τρισδιάστατων στοιχείων |
οπίσθια όψη | Καθορίζει εάν ένα στοιχείο πρέπει να είναι ορατό ή όχι όταν δεν βλέπει στην οθόνη |
Για παράδειγμα:
css .element {πλάτος: 20px ύψος: 20px μετασχηματισμός: κλίμακα (20)}Τώρα, όταν το κάνετε, το καθορισμένο στοιχείο θα κλιμακωθεί κατά 20 φορές.
Όχι μόνο αυτό, μπορείτε επίσης να κλιμακώσετε τον άξονα για οριζόντια και κάθετη κλίμακα.
μετασχηματισμός: κλίμακαX (2) μετασχηματισμός: κλίμακαY (.5)
Για να παρέχετε μια σωστή μετατροπή σε όλα τα προγράμματα περιήγησης μπορείτε:
div {-webkit-transform: scale (1.5) -moz-transform: scale (1.5) -o-transform: scale (1.5) transform: κλίμακα (1.5)}Η ιδιότητα μετασχηματισμού CSS βελτιώνει το χώρο συντεταγμένων του επιπέδου οπτικής μορφοποίησης CSS.
Τι είναι το επίπεδο οπτικής μορφοποίησης;
Το οπτικό επίπεδο μορφοποίησης σημαίνει την επεξεργασία ενός εγγράφου και την παρουσίασή του οπτικά στις πλατφόρμες πολυμέσων. Με οπτική μορφοποίηση, μπορείτε να μετατρέψετε κάθε στοιχείο ως μοντέλο που συμφωνεί με το μοντέλο πλαισίου CSS. Το μοντέλο CSS box ορίζει ένα στοιχείο σε τυπική ορθογώνια μορφή κουτιού που καθορίζει το μέγεθος, τη θέση και τις ιδιότητες.
Σημείωση: Μόνο μεταμορφώσιμα στοιχεία μπορούν να μετατραπούν.
Προχωρώντας με αυτό το άρθρο σχετικά με το Transform In CSS
Ποιες είναι οι διάφορες ιδιότητες μετασχηματισμού;
Ας δούμε όλες τις ιδιότητες μετατροπής:
1. κλίμακα (): Κλίμακα σημαίνει αλλαγή του μεγέθους του στοιχείου είτε οριζόντια είτε κάθετα.
Για κάθετη κλιμάκωση:κλίμακαX
Για οριζόντια κλιμάκωση:κλίμακαY
Για ένα στοιχείο, μπορείτε επίσης να αλλάξετε το μέγεθος της γραμματοσειράς, την επένδυση, το ύψος ή το πλάτος. Η προεπιλεγμένη τιμή είναι 1 που σημαίνει επίσης παροχή 0,5 καθώς η τιμή το μισεί ενώ παρέχει 2 φορές την κλίμακα.
2. skew (): Η ιδιότητα Skew επιτρέπει στον χρήστη να κλίνει ένα στοιχείο προς τα δεξιά ή αριστερά από ένα σημείο συντεταγμένων Είναι σχεδόν σαν να μετατρέπεται ένα ορθογώνιο σε παραλληλόγραμμο. Μπορείτε να παρακάμψετε ένα στοιχείο από τις συντεταγμένες του.
Παράδειγμα:
.element {transform: skewX (25deg)} .στοιχείο {transform: skewY (25deg)Όταν το κάνετε αυτό, το στοιχείο στρέφεται 25 μοίρες οριζόντια και κάθετα χρησιμοποιώντας skewX ή skewY.
3. περιστροφή ( ) : Μπορείτε να περιστρέψετε ένα στοιχείο δεξιόστροφα χρησιμοποιώντας αυτήν την ιδιότητα. Μπορείτε να το περιστρέψετε 180 μοίρες ή 360 μοίρες για να το επαναφέρετε στην αρχική του θέση.
.element {transform: rotate (25deg)}Για την παροχή περιστροφής επίσης, μπορείτε να χρησιμοποιήσετε οποιαδήποτε από τις τρεις διαστάσεις: rotateX, rotateY ή rotateZ.
4. μετάφραση ( ) : Μπορείτε να μετακινήσετε ένα στοιχείο σωστά ανάποδα ή πλάγια.
.element {transform: translate (20 εικονοστοιχεία, 10 εικονοστοιχεία)}Η Μετάφραση θα μετακινήσει ένα αντικείμενο / στοιχείο που καθορίζεται ανάποδα ή πλάγια. Η πρώτη καθορισμένη τιμή μετακινεί το αντικείμενο προς τα δεξιά (αρνητικό θα το μετακινήσει αριστερά) και η δεύτερη τιμή το μετακινεί προς τα κάτω (καθορίζοντας μια αρνητική τιμή θα το μετακινήσει προς τα πάνω).
Εάν αυτό μπορεί να σας μπερδέψει, τότε εφαρμόστε τον άξονα X για να αλλάξετε τη θέση του στοιχείου οριζόντια και τους άξονες Y για να αλλάξετε τη θέση κάθετα. Η πιο εκπληκτική πτυχή της ιδιότητας του μετασχηματισμού είναι ότι, η εφαρμογή του μετασχηματισμού θα επιτρέψει μόνο το στοιχείο να κινείται, διατηρώντας ανέπαφο κάθε στοιχείο ή κείμενο. Η απόσταση λαμβάνεται γενικά σε pixel ή ποσοστά.
Για παράδειγμα:
.element {transform: translateX (value) transform: translateY (τιμή)}5. προοπτική (): Μπορείτε να δώσετε ένα βάθος στην προοπτική ενός στοιχείου. Επιτρέπει να δώσει έναν 3D μετασχηματισμό σε ένα στοιχείο κάνοντάς το κυβικό στον μετασχηματισμό.
translate3d (x, y, z)
μετάφρασηZ (z)
translate3d (x, y, z) translateZ (z)
Η εισαγωγή του άξονα z δίνει στο στοιχείο μια 3D απεικόνιση. Το translateZ () μετακινεί το στοιχείο προς τον θεατή ενώ μια αρνητική τιμή το απομακρύνει.
6. μήτρα () : Συνδυάστε όλες τις μετατροπές σε μία.
περιστροφή (45deg) μετάφραση (24px, 25px)
Η εφαρμογή matrix () συνδυάζει όλες τις ιδιότητες μετασχηματισμού σε έναν πίνακα.
Η εφαρμογή ιδιοτήτων μετασχηματισμού μπορεί να βελτιώσει σημαντικά το στοιχείο σας και, επομένως, την ελκυστικότητα του ιστότοπού σας. Δοκιμάστε τα!
Αυτό μας φέρνει στο τέλος αυτού του άρθρου σχετικά με το Transform In CSS.
Εάν σας ενδιαφέρει να μάθετε περισσότερα σχετικά με την ανάπτυξη ιστού, ρίξτε μια ματιά στο από την Edureka. Η Εκπαίδευση Πιστοποίησης Ανάπτυξης Ιστού θα σας βοηθήσει να μάθετε πώς να δημιουργείτε εντυπωσιακούς ιστότοπους χρησιμοποιώντας HTML5, CSS3, Twitter Bootstrap 3, jQuery και Google API και να το αναπτύξετε στην υπηρεσία απλής αποθήκευσης Amazon (S3).
Εάν εξακολουθείτε να σας ενδιαφέρει Εάν έχετε οποιαδήποτε ερώτηση, μπορείτε να το δημοσιεύσετε στην ενότητα σχολίων αυτού του ιστολογίου 'Τι είναι CSS' και θα επικοινωνήσουμε μαζί σας το συντομότερο δυνατό.