Μετασχηματισμός γεννήτριας CSS3: Κλίμακα, περιστροφή, Μετάφραση και λόγο

CSS3.0 Transform

Γεννήτρια CSS Transform για τεμπέληδες.

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

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

 

Κλίμακα, περιστροφή, Μετάφραση και λόγο

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

 

Περιστρέψτε το στοιχείο δεξιόστροφα με τη δεύτερη ιδιότητα που έχει οριστεί σε μοίρες. Η περιστροφή με 180° φέρνει το αντικείμενο ανάποδα ενώ η λήψη 360° επιστρέφει στην αρχική του όρθια θέση. Ορίστε πολιτική θετική ή αρνητική τιμή ή ακόμα και δεκαδικά.

 

Η Μετάφραση μετατοπίζει το στοιχείο με pixel που σχετίζονται με την αρχική του θέση. Η τιμή X οριζόντια ενώ η τιμή Y κατακόρυφα όταν υπάρχει χαρακτηριστικό περιστροφής είναι μηδέν.

 

Λυγίστε τα αντικείμενα στον οριζόντιο (X) ή τον κάθετο (Y) άξονά τους.

 

Μετασχηματισμός CSS Επεξήγηση 

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

Ορισμός και χρήση

Η ιδιότητα μετασχηματισμού εφαρμόζει έναν 2D ή 3D μετασχηματισμό σε ένα στοιχείο. Αυτή η ιδιότητα σάς επιτρέπει να περιστρέφετε, να κλιμακώνεστε, να μετακινείτε, να παραμορφώνεστε κ.λπ., στοιχεία.

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

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

Οι αριθμοί ακολουθούμενοι από -webkit-, -moz- ή -o- καθορίζουν την πρώτη έκδοση που λειτουργούσε με πρόθεμα.

Σύνταξη
transform: none|transform-functions|initial|inherit;