Cara memutar elemen menggunakan CSS3 (contoh kod)

Dalam reka bentuk web, kesan putaran boleh menambah kesan dinamik pada halaman, menjadikan halaman lebih jelas. Pelbagai kesan putaran boleh dicapai dengan mudah menggunakan CSS3. Di sini, mari belajar cara menggunakan kod putaran CSS3.

1. Putar elemen

Gunakan atribut transformasi untuk memutarkan elemen dengan mudah. Untuk memutar elemen, anda boleh menggunakan kod berikut:

.rotate {
    transform: rotate(30deg);
}

Kod di atas akan memutar elemen 30 darjah mengikut arah jam.

Selain itu, anda boleh menggunakan nilai negatif untuk memutar elemen mengikut lawan jam. Contohnya:

.rotate {
    transform: rotate(-30deg);
}

2. Titik tengah putaran

Secara lalai, titik tengah putaran elemen ialah titik tengah elemen. Walau bagaimanapun, kita boleh menukar titik pusat putaran elemen dengan menukar atribut asal-ubah. Contohnya:

.rotate {
    transform: rotate(30deg);
    transform-origin: top left;
}

Kod di atas akan memutarkan elemen dengan sudut kiri atas sebagai titik tengah putaran. Pada masa yang sama, anda juga boleh menggunakan kod berikut untuk menetapkan titik pusat putaran:

.rotate {
    transform: rotate(30deg);
    transform-origin: 50% 50%;
}

Kod di atas menetapkan titik pusat putaran ke titik tengah elemen.

3. Putaran tiga dimensi

Menggunakan atribut transformasi, anda juga boleh melakukan putaran tiga dimensi, membenarkan elemen berputar dalam ruang tiga dimensi. Contohnya:

.rotate {
    transform: rotateX(30deg);
}

Gunakan kod di atas untuk memutarkan elemen dalam arah paksi-X, atau gunakan atribut rotateY dan rotateZ untuk memutar elemen dalam arah paksi-Y dan paksi-Z.

4. Putaran animasi

Menggunakan CSS3, anda juga boleh memutar elemen melalui animasi. Contohnya:

.rotate {
    animation: rotate 2s infinite;
}
@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

Kod di atas akan menyebabkan elemen berputar sekali dalam 2 saat dan berputar dalam gelung tak terhingga.

Ringkasan

Dalam reka bentuk web, kesan putaran adalah sangat biasa. Pelbagai kesan putaran boleh dicapai dengan mudah menggunakan CSS3, termasuk putaran dua dimensi, putaran tiga dimensi dan putaran animasi. Dengan mempelajari kod di atas, saya percaya anda boleh menambah kesan putaran pada halaman web dengan mudah.

Atas ialah kandungan terperinci Cara memutar elemen menggunakan CSS3 (contoh kod). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!