如何让transform: scale在hover时与transition、animation平滑协作？

问题原因分析 #

1. 添加.rotate类后Hover失效
   当元素加上.rotate类时，类里的transform: scaleX(-1)会和hover状态的transform: scale(1.2)冲突——CSS中同一元素的多个transform不会叠加，只会取优先级更高的规则。.rotate类和hover伪类优先级相同，但因为类选择器写在hover样式之后，所以.rotate的transform会覆盖hover的，导致缩放失效。

2. animation-fill-mode: forwards时Hover失效
   当设置animation-fill-mode: forwards，动画结束后会把关键帧最后一帧的样式（比如transform: scaleX(-1)）固定在元素上。而动画生成的样式优先级高于hover伪类，所以hover触发时无法覆盖这个固定的transform值，缩放自然失效。

修复方案 #

用CSS变量统一控制翻转状态，让hover的transform同时包含缩放和翻转的复合效果，既解决优先级冲突，又实现平滑联动：

修改后的CSS

#test {
  width: 200px;
  transition: transform 0.3s ease;
  --scale-x: 1; /* 默认不翻转 */
}

#test:hover {
  /* 同时应用缩放和当前翻转状态 */
  transform: scale(1.2) scaleX(var(--scale-x));
}

#test.rotate {
  --scale-x: -1; /* 翻转时更新变量 */
  animation: rotateLeft 0.3s ease-in-out;
}

#test:not(.rotate) {
  animation: rotateRight 0.3s ease-in-out;
}

@keyframes rotateRight {
  0% { --scale-x: -1; }
  100% { --scale-x: 1; }
}

@keyframes rotateLeft {
  0% { --scale-x: 1; }
  100% { --scale-x: -1; }
}

修改后的JS

let flag = false;
const test = document.querySelector("#test")

test.addEventListener("click", function() {
  test.classList.toggle("rotate");
  flag = !flag;
});

HTML保持不变

<img id="test" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Stack_Overflow_icon.svg/768px-Stack_Overflow_icon.svg.png" />

修复说明 #

• 用--scale-x变量控制翻转状态，hover时的transform同时包含缩放和翻转逻辑，不管有没有.rotate类，都能正确触发叠加效果。
• 动画不再直接设置transform，而是修改CSS变量，不需要依赖animation-fill-mode: forwards，变量会自动保留最终状态，同时hover的transform优先级足够覆盖动画过程中的临时值。
• JS用classList.toggle简化类切换逻辑，代码更简洁。

内容的提问来源于stack exchange，提问作者user22431569