Bagaimana untuk Mencipta Putaran Imej yang Diaktifkan Hover dengan CSS?

Putaran Imej Diaktifkan Tuding

Menggabungkan gelagat dinamik ke dalam halaman web anda, seperti putaran imej pada tuding, boleh meningkatkan penglibatan pengguna. Untuk mencapai kesan ini dengan CSS pada imej dengan jidar bulat, ikut langkah berikut:

1. Peralihan CSS3 dengan rotate()

Gunakan peralihan CSS3 untuk memutarkan imej pada tuding dengan lancar. Sifat peralihan mentakrifkan tempoh dan fungsi pelonggaran untuk animasi. Dalam kes ini, kami menetapkan tempoh peralihan kepada 0.7 saat dan menentukan fungsi pelonggaran mudah masuk.

<code class="css">img {
  transition: transform .7s ease-in-out;
}</code>

2. Transformasi Tuding

Untuk memutarkan imej pada tuding, kami menggunakan sifat transformasi dengan fungsi rotate() untuk menetapkan sudut putaran yang dikehendaki. Dalam contoh ini, kami memutarkan imej 360 darjah.

<code class="css">img:hover {
  transform: rotate(360deg);
}</code>

3. Pelaksanaan HTML

Dalam kod HTML anda, letakkan elemen imej dengan sumber dan saiz yang sesuai.

<code class="html"><img src="path/to/image.jpg" width="100" height="100"></code>

Kod Contoh

Berikut ialah contoh kod lengkap yang menunjukkan kesan imej berputar:

<code class="css">img {
  border-radius: 50%;
  transition: transform .7s ease-in-out;
}

img:hover {
  transform: rotate(360deg);
}</code>

<code class="html"><img src="path/to/image.jpg" width="100" height="100"></code>

Dengan kod ini, apabila pengguna menuding pada imej, ia akan berputar 360 darjah dengan lancar.

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