Bagaimana untuk Memohon Berbilang Transformasi CSS dalam Satu Baris dan Apakah Susunan Permohonan?

Menggunakan Berbilang Transformasi CSS dalam Satu Baris

Dalam CSS, anda boleh menggunakan berbilang transformasi pada elemen secara serentak. Walau bagaimanapun, jika anda menyediakan berbilang arahan transformasi, hanya yang terakhir akan digunakan.

Untuk menggunakan berbilang transformasi pada satu baris, gabungkan dengan ruang:

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

Tertib Aplikasi

Adalah penting untuk ambil perhatian bahawa berbilang transformasi digunakan dari kanan ke kiri. Ini bermakna susunan transformasi adalah penting, kerana:

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

berbeza daripada:

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

Contoh

Pertimbangkan contoh 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);
}

Anda boleh melihat perbezaannya dengan menggunakan perubahan dalam pesanan.

Atas ialah kandungan terperinci Bagaimana untuk Memohon Berbilang Transformasi CSS dalam Satu Baris dan Apakah Susunan Permohonan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!