menerjemahkan
Nama "menerjemahkan" agak menyesatkan. Ini sebenarnya adalah metode penentuan posisi elemen menggunakan nilai koordinat X dan Y.
Berikut isi kutipannya: #navigasi{ |
Dukungan peramban
Atribut terjemahan saat ini hanya didukung oleh Firefox, Safari, dan Chrome, dan harus menggunakan awalan pribadi browser -moz- dan -webkit-.
Condong
Skew juga merupakan fungsi transformasi yang berguna, yang dapat memiringkan objek pada sudut tertentu di sekitar sumbu x dan y. Berbeda dengan putaran memutar yang hanya berputar tanpa mengubah bentuk elemen. Kemiringan mengubah bentuk suatu elemen. Kemiringan memiliki dua parameter, masing-masing mewakili kemiringan sumbu x dan y.
Berikut isi kutipannya: #navigasi{ |
Dukungan peramban
Atribut Skew saat ini hanya didukung oleh Firefox, Safari, dan Chrome, dan juga menggunakan awalan pribadi browser -moz- dan -webkit-.
Matriks
Ya, Matriks adalah sebuah matriks. Matriks adalah hal yang sangat mendasar dalam matematika tingkat lanjut, dan memang merupakan fungsi yang sangat canggih di CSS 3. CSS 3 memperkenalkan fungsi matriks, yang dapat mewujudkan berbagai efek di atas dengan sangat fleksibel. Ia memiliki 6 parameter (a, b, c, d, e, f), yang sebenarnya merupakan matriks 3*3 yang melaluinya parameter lama diubah menjadi nilai baru:
|. abe |
|.cdf |
|
Jika Anda tertarik untuk mempelajarinya secara mendalam, Anda dapat melihat di sini http://www.w3.org/TR/SVG/coords.html#TransformMatrixDefined . Ini adalah dokumen untuk SVG, tetapi prinsip transformasi matriks bersifat universal .
Mari kita lihat sebuah contoh:
Berikut isi kutipannya: #navigasi{ |
Dukungan peramban
Kabar baiknya adalah IE mendukung filter matriks. Meskipun tidak mendukung sebagian besar fungsi transformasi CSS3, pada dasarnya Anda dapat mencapai efek yang sama menggunakan filter ini. Namun, Anda harus terlebih dahulu memahami operasi matriks. Webkit dan Firefox (3.5+) mendukung fitur ini.
deformasi rantai
Transformasi sering kali bersifat mandiri, namun jika Anda ingin menggunakan beberapa transformasi secara bersamaan, kode dapat diintegrasikan dengan cepat, terutama menggunakan ekstensi privat. Untungnya, kami memiliki beberapa singkatan bawaan:
Berikut isi kutipannya: #navigasi{ |
Transformasi ini dapat digabungkan untuk membuat kode Anda lebih efisien:
Berikut isi kutipannya: navigasi{ |
asal transformasi
transform-origin bukanlah sub-fungsi dari transform, tetapi sangat erat kaitannya dengan transform. Ini dapat digunakan untuk menentukan titik awal transformasi. Misalnya, titik awal default transformasi rotasi adalah di tengah transformasi rotasi mungkin sangat berbeda.
transform-origin menerima dua parameter, yang dapat berupa nilai spesifik seperti persentase, em, px, dll., atau parameter deskriptif seperti kiri, tengah, kanan, atau atas, tengah, bawah, dll. Beberapa contoh:
Berikut isi kutipannya: .class1{-moz-transform-origin: 0 0; |
Kompatibilitas peramban
Atribut ini saat ini hanya didukung oleh webkit dan firefox, dan memerlukan penambahan awalan pribadinya sendiri.