Rekomendasi Kursus：

Fungsi matrix3d() dalam CSS

Definisi dan Penggunaan CSS matrix3d() Fungsi menentukan transformasi 3 dimensi dengan menggunakan matriks 4x4 yang mengandung 16 nilai:

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

Contoh

Contoh 1

Dengan matrix3d() Definiskan transformasi 3 dimensi untuk elemen <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;
}

Coba Sendiri

Contoh 2

Dengan matrix3d() Buat transformasi 3 dimensi untuk elemen <div> lainnya：

.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);
}

Coba Sendiri

Sintaks CSS

matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)
Nilai Deskripsi
a1 b1 c1 d1 a2 b2 c2 d2 a3 b3 c3 d3 Diperlukan. Tentukan angka yang menentukan transformasi linear.
a4 b4 c4 d4 Diperlukan. Tentukan angka yang menentukan transformasi yang akan diterapkan.

Detil Teknologi

Versi： Modul Transformasi CSS Level 2

Dukungan Browser

Tabel angka menunjukkan versi browser yang pertama yang mendukung fungsi ini penuhnya.

Chrome Edge Firefox Safari Opera
12 12 10 4 15

Halaman yang berhubungan

Referensi:Properti transform CSS

Referensi:Fungsi matrix() CSS

Panduan:Transformasi 3D CSS