Bagaimanakah Saya Memohon Berbilang Transformasi CSS pada Elemen?

Menukar Elemen dengan Berbilang Sifat CSS

CSS membenarkan penerapan berbilang transformasi pada elemen. Walau bagaimanapun, apabila menggunakan sifat transformasi beberapa kali, hanya arahan terakhir yang berkuat kuasa. Untuk menggunakan berbilang transformasi, anda perlu menggabungkannya pada satu baris.

Contoh:

Dalam CSS berikut, hanya terjemahan digunakan pada elemen:

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

Untuk menggunakan kedua-dua transformasi, gabungkannya pada satu baris:

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

Tertib Transformasi

Berbilang transformasi yang digunakan pada satu baris diproses dari kanan ke kiri. Ini bermakna transformasi paling kanan digunakan dahulu.

Pertimbangkan contoh berikut:

transform: scale(1, 1.5) rotate(90deg);

transform: rotate(90deg) scale(1, 1.5);

Kedua-dua transformasi ini akan tidak menghasilkan hasil yang sama disebabkan oleh pesanan permohonan yang berbeza.

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