Συνάρτηση matrix() CSS

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

Η CSS matrix() Η συνάρτηση ορίζει μια δυάδων μεταμόρφωση μέσω μιας ματρίας που περιέχει έξι τιμές.

matrix() Η συνάρτηση δέχεται έξι παραμέτρους, αυτές επιτρέπουν τη περιστροφή, την κλίμακα, τη μετακίνηση και τη διεύθυνση των στοιχείων.

Παράμετροι: matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY()).

Παράδειγμα

Παράδειγμα 1

Χρήση matrix() Ορισμός δυάδων μεταμορφώσεων για αρκετά στοιχεία <div>:

#myDiv1 {
  transform: matrix(1, -0.3, 0, 1, 0, 50);
}
#myDiv2 {
  transform: matrix(1, 0, 0.5, 1, 50, 50);
}
#myDiv3 {
  transform: matrix(2, 1, 0.5, 1, 90, 70);
}

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

Παράδειγμα 2

Χρήση matrix() Δημιουργία δυάδων μεταμορφώσεων για τις εικόνες:

#img1 {
  transform: matrix(1, -0.3, 0, 1, 0, 50);
}
#img2 {
  transform: matrix(1, 0, 0.5, 1, 50, 50);
}
#img3 {
  transform: matrix(2, 1, 0.5, 1, 90, 70);
}

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

Γλωσσή CSS

matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())
Αξία Περιγραφή
scaleX() Απαιτείται. Αριθμός, χρησιμοποιείται για τη ρύθμιση του πλάτους των στοιχείων.
skewY() Απαιτείται. Αριθμός (γωνία), χρησιμοποιείται για τη διεύθυνση της μεταμόρφωσης κατά μήκος του άξονα Y.
skewX() Απαιτείται. Αριθμός (γωνία), χρησιμοποιείται για τη διεύθυνση της μεταμόρφωσης κατά μήκος του άξονα X.
scaleY() Απαιτείται. Αριθμός, χρησιμοποιείται για τη ρύθμιση του ύψους των στοιχείων.
translateX() Απαιτείται. Αριθμός, χρησιμοποιείται για τη μετακίνηση των στοιχείων κατά μήκος του άξονα X.
translateY() Απαιτείται. Αριθμός, χρησιμοποιείται για τη μετακίνηση των στοιχείων κατά μήκος του άξονα Y.

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

Έκδοση: Μόδου μεταμορφώσεων CSS Level 1

Υποστήριξη περιηγητή

Ο αριθμός στην τаблицη δείχνει την έκδοση του προγράμματος περιήγησης που υποστηρίζει πλήρως τη συνάρτηση.

Χρωμίου Εντζ Φαξ Σαφάρι Οπερα
1 12 3.5 3.1 10.5

Σχετικές Σελίδες

Αναφορά:CSS transform 属性

Αναφορά:CSS matrix3d() Λειτουργία

Εκμάθηση:CSS 2D Μετατροπές