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

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

CSS matrix3d() Η συνάρτηση χρησιμοποιεί μια 4x4 μatrice που περιέχει 16 τιμές για να ορίζει τη τρισδιάστατη μετατροπή:

Παράδειγμα

Παράδειγμα 1

Χρήση matrix3d() Ορισμός τρισδιάστατης μετατροπής για ένα στοιχείο <div>:

.div1 {
  transform: matrix3d(
    0.7, 0.1, 0.7, 0
    -0.6, 0.7, 0.2, 0
    -0.5, -0.8, 0.7, 0
    10, 10, 0, 1
  );
  font-size: 30px;
  font-weight: bold;
  width: 280px;
  padding: 10px;
  background: beige;
  font-family: verdana;
  border: 1px solid green;
}

Προσπάθησε να το δοκιμάσεις

Παράδειγμα 2

Χρήση matrix3d() Δημιουργία τρισδιάστατης μετατροπής για ένα άλλο στοιχείο <div>:

.div1 {
  font-size: 30px;
  font-weight: bold;
  width: 280px;
  height: 40px;
  padding: 10px;
  background: beige;
  font-family: verdana;
  border: 1px solid green;
  transform-style: preserve-3d;
  transition: transform 1.5s;
  transform: rotate3d(1, 1, 1, 30deg);
  margin: 50px auto;
}
.div1:hover {
.div1:focus {
  transform: rotate3d(1, 1, 1, 30deg);
  matrix3d(1, 0, 0, 0, 0, 1, 6, 0, 0, 0, 1, 0, 50, 100, 0, 1.1);
}

Προσπάθησε να το δοκιμάσεις

Γλωσσική δομή CSS

matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)

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

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

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

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

Παραδείγματα:Η ιδιότητα transform του CSS

Παραδείγματα:Η συνάρτηση matrix() του CSS

Εκμάθηση:3D μεταμορφώσεις CSS