影像上的懸停旋轉效果可以讓您的內容更具吸引力和互動性。在本教學中，我們將引導您了解如何僅使用 HTML 和 CSS 建立簡單但引人注目的懸停旋轉效果。

如何創造效果

HTML：

首先加入以下HTML程式碼：

您可以新增任何您喜歡的圖像。

此程式碼設定了一個包含在具有懸停旋轉類別的標籤中的圖像。

CSS：

.hover-rotate {
  overflow: hidden;
  margin: 8px;
  min-width: 240px;
  max-width: 320px;
  width: 100%;
}
.hover-rotate img {
  transition: all 0.3s;
  max-width: 100%;
}
.hover-rotate:hover img {
  transform: scale(1.3) rotate(5deg);
}

運作原理：

.hover-rotate 類別設定影像的尺寸並隱藏任何溢出。 .hover-rotate img 類別處理平滑過渡效果。

當您將滑鼠懸停在圖像上時，由於變換屬性，圖像會放大 1.3 倍並旋轉 5 度。

如果您發現本教學有幫助，請隨時與其他人分享或在下面發表評論。有關網頁設計的更多提示和技巧，請務必查看我們的其他貼文。

訪問我的網站以獲取更多此類教程