CSS 讓 WordPress 留言大頭貼滑過時旋轉：transition 與 transform 寫法

想讓留言區活潑一點，可以讓訪客的大頭貼在滑鼠移上去時轉一圈。只要幾行 CSS，不用裝外掛。

程式碼

.avatar {
  border-radius: 50%;
  transition: transform 0.4s ease-out;
}

.avatar:hover {
  transform: rotate(360deg);
}

逐行說明：

• .avatar：WordPress 輸出大頭貼時，圖片都會帶有 avatar 這個 class，直接用它就能選到。
• border-radius: 50%：把方形頭像變成圓形，轉起來比較好看。主題本來就是圓形頭像的話可以省略。
• transition：讓變化花 0.4 秒慢慢完成，而不是瞬間跳過去；ease-out 是先快後慢。
• transform: rotate(360deg)：旋轉一整圈。滑鼠移開時，會反方向轉回原位。

舊寫法裡的前綴可以拿掉

這篇文章舊版的程式碼寫了 -webkit-transition、-moz-transform 這些前綴，以及 rotateZ(360deg)。前綴是很多年前瀏覽器還沒正式支援時才需要的，現在都可以拿掉；rotateZ() 在平面上的效果跟 rotate() 一樣，寫哪一個都可以。

加在哪裡？

到 WordPress 後台「外觀 → 自訂 → 附加的 CSS」貼上，儲存後就會生效。其他加入 CSS 的方式，請看HTML 加入 CSS 的三種方法。

只套用在留言區

.avatar 會選到網站上所有的大頭貼，包含作者介紹、側邊欄，甚至登入後上方工具列的頭像。只想讓留言區的頭像旋轉，就在前面加上留言區外層的 class：

.comment-list .avatar {
  border-radius: 50%;
  transition: transform 0.4s ease-out;
}

.comment-list .avatar:hover {
  transform: rotate(360deg);
}

.comment-list 是很多傳統主題留言列表的 class；區塊主題的留言區可以試試 .wp-block-comment-template。不確定的話，在留言的大頭貼上按右鍵選「檢查」，往上找外層是哪個 class。

其他變化

轉一圈再放大一點

.comment-list .avatar:hover {
  transform: rotate(360deg) scale(1.15);
}

左右搖一搖

.comment-list .avatar:hover {
  animation: wiggle 0.5s ease-in-out;
}

@keyframes wiggle {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-12deg); }
  75% { transform: rotate(12deg); }
}

新寫法：獨立的 rotate 屬性

現代瀏覽器也可以把旋轉獨立寫成 rotate 屬性，不用放在 transform 裡：

.comment-list .avatar {
  transition: rotate 0.4s ease-out;
}

.comment-list .avatar:hover {
  rotate: 360deg;
}

效果一樣。好處是之後想再加上 transform 的其他效果（例如位移），不會互相覆蓋。

手機與減少動態效果

• 手機沒有「滑過」：觸控裝置沒有滑鼠，要點一下才可能觸發，效果也不一定一樣。可以用 @media (hover: hover) 包起來，只在有滑鼠的裝置上啟用。
• 減少動態效果：有些人在作業系統裡開了「減少動態效果」，會轉動的畫面可能讓他們頭暈，就不要轉給他們看。

兩個條件一起寫，就是建議直接使用的完整版本：

.comment-list .avatar {
  border-radius: 50%;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .comment-list .avatar {
    transition: transform 0.4s ease-out;
  }

  .comment-list .avatar:hover {
    transform: rotate(360deg);
  }
}

只有「有滑鼠，而且沒有要求減少動態效果」的裝置才會旋轉，其他人看到的就是一般的大頭貼。

延伸閱讀

• HTML 加入 CSS 的三種方法：外部樣式表、內部樣式表、行內樣式怎麼選
• 好用的 CSS 語法技巧：半透明、圓角、陰影、字型等 15 個常用寫法
• CSS 漂亮底線寫法：螢光筆標記、滑過展開的連結底線與 text-decoration 新屬性

留言區加一點小互動，網站就多一分親切感。正威網路行銷是 25 年經驗的基隆網頁設計工作室，提供客製化網頁設計與網站維護託管，歡迎來聊聊。