Bagaimana untuk Mencipta Kesan Putaran atau Putaran Imej pada Hover Menggunakan CSS?

Meniru Putaran atau Putaran Imej pada Tuding Menggunakan CSS

Untuk mencapai kesan putaran atau putaran yang diingini pada imej apabila dilegar, CSS boleh digunakan dengan sifat dan peralihan tertentu . Begini cara ia boleh dilaksanakan:

Pelaksanaan Kod

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

Dalam kod HTML yang disediakan, setiap elemen imej diubah suai menggunakan gaya CSS di atas:

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

Penjelasan

• Jejari sempadan: Menetapkan imej kepada bentuk bulat (50% jejari sempadan).
• Peralihan: Mentakrifkan peralihan lancar bagi penjelmaan imej pada tuding (tempoh dan fungsi pelonggaran).
• Ubah: Putar: Semasa tuding, sifat penjelmaan imej ditetapkan untuk berputar 360 darjah, menyebabkan ia berputar .

Pelaksanaan CSS ini membolehkan imej berputar dengan lancar di sekeliling tengahnya apabila tetikus melayang di atasnya.

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