Fungsi matrix3d () adalah fungsi transformasi 3D yang digunakan untuk menggambarkan urutan transformasi tiga dimensi dalam kisi 4 × 4.
Misalnya, alih-alih menggunakan dua atau lebih fungsi transformasi dalam satu deklarasi seperti:
|
1 |
transform: rotate3d(1, 0, 1, 45deg) translate3d(24px,25px, 100px); |
Menggunakan fungsi matrix3d (), kita bisa menggabungkan dua transformasi ini menjadi satu matriks:
|
1 2 |
transform: matrix3d(0.8535533905932737, 0.4999999999999999, 0.14644660940672619, 0, -0.4999999999999999, 0.7071067811865476, 0.4999999999999999, 0, 0.14644660940672619, -0.4999999999999999, 0.8535533905932737, 0, 22.62994231491119, -20.3223304703363, 101.3700576850888, 1) |
Seperti yang Anda lihat, menghitung nilai fungsi matrix3d () tidak akan mudah jika Anda tidak paham matematika. Perhitungan ini mungkin juga tidak dimaksudkan untuk dilakukan dengan tangan. Untungnya, Eric Meyer dan Aaron Gustafson menciptakan alat yang sangat berguna yang dapat melakukan perhitungan untuk Anda — yang Anda lakukan hanyalah memasukkan transformasi yang Anda inginkan dan klik tombol merah untuk alat tersebut untuk menghasilkan fungsi matriks setara () untuk Anda.
Sintaks resmi adalah sebagai berikut:
|
1 |
transform: matrix3d( <number> [, <number> ]{15,15} ); |
Metode mengubah elemen di dimensi ketiga menggunakan properti transform. Termasuk dukungan untuk properti perspektif untuk mengatur perspektif dalam z-space dan properti visibilitas backface untuk mengaktifkan tampilan sisi sebaliknya dari elemen yang diubah 3D.