Rekomendasi Kursus:

Fungsi matrix() CSS

Definisi dan penggunaan CSS matrix() Fungsi mendefinisikan transformasi dua dimensi dengan matriks yang mengandung enam nilai.

matrix() Fungsi menerima enam parameter, yang memungkinkan Anda melakukan operasi rotasi, skala, gerakan, dan skew elemen.

Parameter seperti berikut: matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())。

Instansi

Contoh 1

Dengan matrix() Tentukan transformasi dua dimensi untuk beberapa elemen <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);
}

Coba Sendiri

Contoh 2

Dengan matrix() Buat transformasi dua dimensi untuk gambar：

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

Coba Sendiri

Syarat CSS

matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())

Detil Teknologi

Dukungan Browser

Angka di tabel menunjukkan versi browser yang pertama yang mendukung fungsi ini penuh.

Halaman yang berhubungan

Referensi:Atribut transform CSS

Referensi:Fungsi matrix3d() CSS

Pelajaran:Transformasi 2D CSS