CSS μετασχηματισμός ιδιότητα

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

Η ιδιότητα transform εφαρμόζει 2D ή 3D μετατροπή στο στοιχείο. Η ιδιότητα αυτή επιτρέπει τη περιστροφή, τη μεγέθυνση, τη μετακίνηση ή την κλίση του στοιχείου.

Για καλύτερη κατανόηση της ιδιότητας transform, παρακαλώ δείτε αυτήν τηνΠαρουσίαση.

Δείτε επίσης:

Εκμάθηση CSS3CSS3 2D μετασχηματισμός

Εκμάθηση CSS3CSS3 3D μετασχηματισμός

Εγχειρίδιο HTML DOMΑξία transform

Παράδειγμα

Γύρισμα του στοιχείου div:

div
{
transform:rotate(7deg);
}

Δοκιμάστε το προσωπικά

Περισσότερες παραδείγματα στο κάτω μέρος της σελίδας.

Γλώσσα CSS

transform: none|transform-functions;

Τιμή ιδιοτήτων

Τιμή Περιγραφή Δοκιμή
none Ορισμός χωρίς μετατροπή. Δοκιμή
matrix(n,n,n,n,n,n) Ορισμός 2D μετατροπής, χρησιμοποιώντας πλέγμα με έξι τιμές. Δοκιμή
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) Ορισμός 3D μετατροπής, χρησιμοποιώντας 4x4 πλέγμα με 16 τιμές.
translate(x,y) Ορίζει την 2D μετατροπή. Δοκιμή
translate3d(x,y,z) Ορίζει την 3D μετατροπή.
translateX(x) Ορίζει την μετατροπή, χρησιμοποιώντας μόνο την τιμή του άξονα X. Δοκιμή
translateY(y) Ορίζει την μετατροπή, χρησιμοποιώντας μόνο την τιμή του άξονα Y. Δοκιμή
translateZ(z) Ορίζει την 3D μετατροπή, χρησιμοποιώντας μόνο την τιμή του άξονα Z.
scale(x,y) Ορίζει την 2D κλίμακα μετατροπή. Δοκιμή
scale3d(x,y,z) Ορίζει την 3D κλίμακα μετατροπή.
scaleX(x) Ορίζει την κλίμακα μετατροπή μέσω της ύψους του άξονα X. Δοκιμή
scaleY(y) Ορίζει την κλίμακα μετατροπή μέσω της ύψους του άξονα Y. Δοκιμή
scaleZ(z) Ορίζει την 3D κλίμακα μετατροπή μέσω της ύψους του άξονα Z.
rotate(angle) Ορίζει την 2D στροφή, ορίζοντας το γωνία στους παραμέτρους. Δοκιμή
rotate3d(x,y,z,angle) Ορίζει την 3D στροφή.
rotateX(angle) Ορίζει την 3D στροφή μετατροπή κατά μήκος του άξονα X. Δοκιμή
rotateY(angle) Ορίζει την 3D στροφή μετατροπή κατά μήκος του άξονα Y. Δοκιμή
rotateZ(angle) Ορίζει την 3D στροφή μετατροπή κατά μήκος του άξονα Z. Δοκιμή
skew(x-angle,y-angle) Ορίζει την 2D κατρακύλα μετατροπή κατά μήκος των άξονων X και Y. Δοκιμή
skewX(angle) Ορίζει την 2D κατρακύλα μετατροπή κατά μήκος του άξονα X. Δοκιμή
skewY(angle) Ορίζει την 2D κατρακύλα μετατροπή κατά μήκος του άξονα Y. Δοκιμή
perspective(n) Ορίζει την οπτική προβολή για τα στοιχεία 3D μετατροπής. Δοκιμή

Τεχνικά λεπτομέρειες

Προεπιλεγμένη τιμή: none
Κληρονομικότητα: no
Έκδοση: CSS3
Γλώσσα σύνταξης JavaScript: object.style.transform="rotate(7deg)"

Περισσότερες παραδείξεις

Η εικόνα που πετάγεται πάνω από το τραπέζι
Αυτό το παράδειγμα δείχνει πώς να δημιουργήσετε εικόνες Polaroid και να γυρίσετε τις εικόνες.

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

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

Τα αριθμητικά με πρόθεμα -webkit-、-moz- ή -ms- δείχνουν την πρώτη έκδοση που χρησιμοποιεί το πρόθεμα.

κατάσταση Chrome IE / Edge Firefox Safari Opera
transform (2D) 36.0
4.0 -webkit-		 10.0
9.0 -ms-		 16.0
3.5 -moz-		 9.0
3.2 -webkit-		 23.0
15.0 -webkit-
10.5 -o-
transform (3D) 36.0
12.0 -webkit-		 12.0 10.0 9.0
4.0 -webkit-		 23.0
15.0 -webkit-