Teknologi animasi CSS3 yang perlu Anda ketahui (2)

Penulis：Eve Cole Waktu Pembaruan：2025-01-15 16:16:56

menerjemahkan

Nama "menerjemahkan" agak menyesatkan. Ini sebenarnya adalah metode penentuan posisi elemen menggunakan nilai koordinat X dan Y.

Berikut isi kutipannya:

#nav{
/* Ini akan memindahkan elemen nav 10 piksel ke kiri dan 20 piksel ke bawah */
-moz-transformasi: terjemahkan(10px, 20px);
-transformasi webkit: terjemahkan(10px, 20px);
}

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:

#nav{
/* Ini akan memindahkan elemen nav 10 piksel ke kiri dan 20 piksel ke bawah */
-moz-transformasi: miring(30 derajat, -10 derajat);
-transformasi webkit: miring(30 derajat, -10 derajat);
}

Dukungan peramban

Atribut Skew saat ini hanya didukung oleh Firefox, Safari, dan Chrome, dan 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{
/* Elemen nav akan dimiringkan seperti pojok kanan atas */
-moz-transformasi: matriks(1, -0.2, 0, 1, 0, 0);
-transformasi webkit: matriks(1, -0.2, 0, 1, 0, 0);
}

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:

#nav{
-moz-transformasi: terjemahkan(10, 25);
-transformasi webkit: terjemahkan(10, 25);
-moz-transformasi: putar (90 derajat);
-transformasi webkit: putar(90 derajat);
-moz-transform: skala(2, 1);
-transformasi webkit: skala(2, 1);
}

Transformasi ini dapat digabungkan untuk membuat kode Anda lebih efisien:

Berikut isi kutipannya:

navigasi{
-moz-transform: terjemahkan(10, 25) putar(90 derajat) skala(2, 1);
-webkit-transform: terjemahkan(10, 25) putar(90 derajat) skala(2, 1);
}

Kekuatan sesungguhnya dari sifat-sifat ini digabungkan menjadi satu. Anda dapat memindahkan, memutar, menskalakan, dan mengontrol elemen sebaris dan tingkat blok apa pun tanpa menggunakan JavaScript. Ketika dukungan untuk properti ini semakin luas, kita dapat membuat antarmuka dan aplikasi yang lebih kaya dan ringan.

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;
-webkit-transformasi-asal: 0 0;
...
}
.class2{-moz-transform-origin:100% 100%;
-webkit-transformasi-asal:100% 100%;
...}
.class3{-moz-transform-origin:kiri atas;
-webkit-transform-origin: kiri atas;
...}

Kompatibilitas peramban

Atribut ini saat ini hanya didukung oleh webkit dan firefox, dan memerlukan penambahan awalan pribadinya sendiri.