如何使用 CSS 使圖片在懸停時旋轉？

在懸停時變換影像：旋轉或旋轉

使用CSS 實現懸停時旋轉影像的效果需要利用CSS3 過渡和旋轉（）屬性。讓我們深入研究解決方案：

transition 屬性定義元素應如何隨時間變化。這裡，transform .7s escape-in​​-out 表示變換（旋轉）應該花費 0.7 秒，並且應該遵循緩動曲線。

transform 屬性負責修改元素的位置、大小或旋轉。 transform:rotate(360deg) 告訴瀏覽器在觸發 :hover 狀態時將影像旋轉 360 度。

這是更新的程式碼：

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

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

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

此程式碼新增影像的平滑動畫，使其在遊標懸停在其上時旋轉一次。您可以自訂旋轉值來控制旋轉角度或調整過渡設定來修改動畫的速度和緩動。

以上是如何使用 CSS 使圖片在懸停時旋轉？的詳細內容。更多資訊請關注PHP中文網其他相關文章！