Atribut transformasi CSS digunakan untuk berputar, skala, kecondongan, dan menterjemahkan unsur -unsur tanpa menjejaskan aliran dokumen. Sintaks asasnya berubah: nilai fungsi, seperti berputar (), skala (), terjemahan () dan condong (). Fungsi berganda dipisahkan oleh ruang dan dilaksanakan dengan tepat dari kanan ke kiri. Tidak seperti atas dan kiri, terjemahan diberikan melalui GPU, yang lebih sesuai untuk animasi dan mempunyai prestasi yang lebih baik. Gunakan asal transformasi untuk menyesuaikan titik pusat transformasi, menyokong dua atau tiga nilai untuk menentukan kedudukan asal. Perintah pelbagai transformasi akan menjejaskan kesan akhir, jadi sila berhati -hati untuk melaksanakan fungsi paling tepat terlebih dahulu. Menguasai perkara -perkara utama ini membolehkan kesan visual yang lancar dan kompleks.

Atribut transform CSS membolehkan anda berputar, skala, kecondongan dan menterjemahkan unsur -unsur tanpa mengubah aliran dokumen. Ia bukan sahaja mudah dan berkesan, tetapi juga mempunyai prestasi yang baik, sesuai untuk kesan animasi dan interaksi.

Bagaimana menggunakan Transformasi Sintaks Asas?

Harta transform menerima satu atau lebih fungsi sebagai nilai yang menentukan jenis transformasi yang anda mahu memohon. Kaedah penulisan asas adalah seperti berikut:

 Transform: Putar (30Deg) Skala (1.5);

Anda boleh memohon pelbagai transformasi pada masa yang sama, hanya memisahkannya dengan ruang. Perintah ini penting kerana penyemak imbas akan melakukan transformasi dalam perintah dari kanan ke kiri (iaitu skala pertama dan kemudian berputar).

Fungsi transformasi yang biasa digunakan termasuk:

• rotate() - Putar
• scale() - Skala
• translate() - Plant
• skew() - lilt

Sebagai contoh, jika anda mahu butang untuk mengezum dan berputar sedikit semasa mengklik, anda boleh menulis seperti ini:

 butang: hover {
  Transform: Putar (5Deg) Skala (1.1);
}

Apakah perbezaan antara kedudukan terjemahan dan mutlak?

Ramai orang akan bertanya: Sejak translate dapat memindahkan unsur -unsur, apakah perbezaan di antara dan position: absolute; top: xx; left: xx ?

Malah, fungsi mereka kelihatan sama, tetapi mekanisme yang mendasari adalah berbeza. translate diberikan pada tahap GPU, yang lebih sesuai untuk animasi dan mempunyai kelancaran yang lebih baik; manakala penyusunan semula susun atur pencetus top dan left , yang sedikit lebih rendah dalam prestasi.

Sebagai contoh, jika anda ingin membuat animasi gelongsor, menggunakan translate lebih disyorkan daripada secara langsung mengubah nilai top :

 .slide-in {
  Transform: Translatey (-20px);
  Kelegapan: 0;
  Peralihan: Semua 0.3s mudah;
}

.slide-in.active {
  Transform: Translate (0);
  Kelegapan: 1;
}

Ini akan menjadikan animasi lebih lancar, terutamanya pada peranti mudah alih.

Transform-Origin Laraskan titik pusat transformasi

Secara lalai, transformasi dilakukan di sekitar titik tengah elemen. Tetapi jika anda mahu berputar di sekitar sudut kiri atas, atau zum pada titik tertentu, anda perlu menggunakan harta transform-origin .

Contohnya:

 .box {
  Transform: berputar (45deg);
  Transform-asal: kiri atas;
}

Ini menyebabkan elemen berputar dengan sudut kiri atas sebagai paksi. Harta ini sering digunakan dalam adegan seperti animasi ikon, pengembangan menu dan keruntuhan.

Anda boleh menetapkan dua atau tiga nilai untuk mengawal kedudukan asal, sebagai contoh:

• transform-origin: 50% 50% (Lalai, Pusat)
• transform-origin: left bottom
• transform-origin: 10px 20px

Ingat, penyesuaian asal akan menjejaskan keseluruhan kesan transformasi, jadi disyorkan untuk bekerjasama dengan alat pemaju penyemak imbas untuk melihat perubahan semasa debugging.

Bagaimana menggabungkan pelbagai transformasi?

Seperti yang dinyatakan sebelum ini, terdapat perintah antara pelbagai transformasi. Walaupun kaedah penulisan dari kiri ke kanan, perintah pelaksanaan sebenar adalah dari kanan ke kiri .

Contohnya:

 Transform: Putar (30Deg) TranslateX (100px);

Malah, ia adalah untuk bergerak 100px ke kanan terlebih dahulu, dan kemudian memutarkan keseluruhan 30 darjah. Pada masa ini, anda akan mendapati bahawa kedudukan elemen tidak hanya beralih 100px ke kanan, tetapi diimbangi oleh arka di sekitar titik tertentu.

Sekiranya anda ingin berputar terlebih dahulu dan kemudian diterjemahkan, anda perlu menukar pesanan:

 Transform: TranslateX (100px) berputar (30deg);

Memahami ini sangat penting untuk mewujudkan animasi yang kompleks. Jika anda tidak pasti tentang kesan pesanan, anda boleh mencubanya sedikit dalam penyemak imbas dan memerhatikan perbezaannya.

Pada dasarnya itu sahaja. Dengan menguasai penggunaan asas dan teknik transformasi biasa, anda boleh membuat banyak kesan visual praktikal dan indah.

Atas ialah kandungan terperinci Melaksanakan Transformasi Menggunakan CSS Transform Property. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!