Bagaimana untuk Mencipta Imej Berputar atau Berputar Animasi Hover dengan CSS?

Cara Membuat Imej Berputar atau Berputar Animasi Tuding dengan CSS

Memusing atau memutar imej pada tuding ialah kesan biasa dan menarik secara visual yang meningkatkan penglibatan pengguna. Untuk mencapai kesan ini menggunakan CSS, ikuti langkah berikut:

Pertama sekali, pastikan imej mempunyai sempadan bulat. Ini boleh dilakukan dengan menetapkan jejari sempadan kepada 50%, seperti yang dilihat dalam kod berikut:

<code class="css">img {
  border-radius: 50%;
}</code>

Seterusnya, tambahkan animasi CSS3 pada sifat transformasi imej. peralihan membolehkan peralihan lancar antara keadaan, manakala rotate() menggunakan kesan putaran yang diingini:

<code class="css">img {
  transition: transform .7s ease-in-out;
}
img:hover {
  transform: rotate(360deg);
}</code>

Dalam contoh ini, imej berputar 360 darjah penuh pada tuding, mencipta kesan putaran lancar. Anda boleh melaraskan sudut rotate() untuk menyesuaikan jumlah putaran.

Untuk tujuan demonstrasi, berikut ialah contoh coretan kod HTML:

<code class="html"><img src="https://i.sstatic.net/BLkKe.jpg" width="100" height="100"/></code>

Dengan menggabungkan elemen CSS dan HTML ini, anda boleh mencipta imej berputar atau berputar animasi tuding dengan berkesan.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Imej Berputar atau Berputar Animasi Hover dengan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!