懸停激活的圖像旋轉

將動態行為（例如懸停時的圖像旋轉）納入網頁中，可以增強用戶參與度。若要在有圓形邊框的圖片上使用CSS 實現此效果，請按照下列步驟操作：

1. CSS3 過渡與旋轉（）

利用CSS3過渡在懸停時平滑地旋轉影像。過渡屬性定義動畫的持續時間和緩動函數。在本例中，我們將過渡持續時間設定為 0.7 秒，並指定緩入緩出緩動函數。

img {
  transition: transform .7s ease-in-out;
}

2.懸停變換

要在懸停時旋轉圖像，我們使用transform屬性和rotate()函數來設定所需的旋轉角度。在此範例中，我們將影像旋轉 360 度。

img:hover {
  transform: rotate(360deg);
}

3. HTML 實作

在 HTML 程式碼中，放置具有適當來源和大小的圖片元素。

範例程式碼

這裡是完整的程式碼範例示範旋轉影像效果：

img {
  border-radius: 50%;
  transition: transform .7s ease-in-out;
}

img:hover {
  transform: rotate(360deg);
}

使用此程式碼，每當使用者將滑鼠懸停在影像，它將平滑地旋轉360 度。