將動態行為合併到您的網頁中，例如懸停時的圖像旋轉，可以增強用戶參與度。若要在有圓形邊框的圖片上使用CSS 達到此效果，請依照下列步驟操作：
1. CSS3 轉場與旋轉（）
利用CSS3過渡在懸停時平滑地旋轉影像。過渡屬性定義動畫的持續時間和緩動函數。在本例中，我們將過渡持續時間設定為 0.7 秒，並指定緩入緩出緩動函數。
<code class="css">img {
transition: transform .7s ease-in-out;
}</code>2.懸停變換
要在懸停時旋轉圖像，我們使用transform屬性和rotate()函數來設定所需的旋轉角度。在此範例中，我們將影像旋轉 360 度。
<code class="css">img:hover {
transform: rotate(360deg);
}</code>3. HTML 實作
在 HTML 程式碼中，放置具有適當來源和大小的圖片元素。
<code class="html"><img src="path/to/image.jpg" width="100" height="100"></code>
範例程式碼
這是示範旋轉影像效果的完整程式碼範例：
<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>
使用此程式碼，每當使用者將滑鼠懸停在圖像上時，它將平滑地旋轉360 度。
以上是如何使用 CSS 創建懸停激活的圖像旋轉？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
