Bagaimanakah Saya Memohon Berbilang Transformasi CSS dengan Betul?

Menggunakan Berbilang Transformasi CSS

Transformasi CSS membolehkan pembangun memanipulasi elemen dalam pelbagai cara, termasuk terjemahan, putaran dan penskalaan. Walau bagaimanapun, apabila menggunakan berbilang transformasi pada elemen, hanya transformasi terakhir yang biasanya dilaksanakan.

Masalah:

Dalam contoh berikut, transformasi terjemahan tidak digunakan kerana penjelmaan putaran diletakkan selepas ia:

li:nth-child(2) {
    transform: rotate(15deg);
    transform: translate(-20px,0px);        
}

Penyelesaian:

Untuk menggunakan berbilang transformasi, ia mesti diletakkan pada satu baris, dipisahkan dengan ruang. Penjelmaan akan digunakan dari kanan ke kiri:

li:nth-child(2) {
    transform: rotate(15deg) translate(-20px,0px);
}

Oleh itu, penjelmaan putaran akan digunakan terlebih dahulu, diikuti dengan terjemahan.

Tertib Pelaksanaan:

Apabila menggunakan berbilang transformasi, susunan transformasi penting. Sebagai contoh, memutarkan elemen 90 darjah dan kemudian menskalakannya sebanyak 1.5 tidak akan menghasilkan hasil yang sama seperti menskalakannya dahulu dan kemudian memutarnya.

Pertimbangkan demonstrasi berikut:

.orderOne, .orderTwo {
  font-family: sans-serif;
  font-size: 22px;
  color: #000;
  display: inline-block;
}

.orderOne {
  transform: scale(1, 1.5) rotate(90deg);
}

.orderTwo {
  transform: rotate(90deg) scale(1, 1.5);
}

Dalam contoh ini, ".orderOne" akan muncul diputar 90 darjah dan berskala 1.5, manakala ".orderTwo" akan kelihatan diputar 90 darjah dan kemudian berskala 1.5. Ini menunjukkan bahawa susunan transformasi adalah penting dan mesti dipertimbangkan dengan teliti apabila menggunakan berbilang transformasi.

Atas ialah kandungan terperinci Bagaimanakah Saya Memohon Berbilang Transformasi CSS dengan Betul?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!