不会冲突，但必须合并为一条transform声明，如transform: scale(1.1) rotate(5deg)，顺序影响视觉效果，推荐加transform-origin: center，并用transition: transform 0.3s过渡。
button:hover 里同时用 transform: scale() 和 rotate() 会冲突吗
不会冲突，但必须写在同一个 transform 声明里，不能拆成两条规则。浏览器只认最后一个 transform 值，后写的会覆盖前写的。
常见错误是这样写：
button:hover {
transform: scale(1.1);
transform: rotate(5deg); /* 这行生效，scale 被丢弃 */
}
正确写法是合并为一条：
button:hover {
transform: scale(1.1) rotate(5deg);
}
- 顺序有影响：先 scale 再 rotate，和先 rotate 再 scale，视觉结果不同（旋转中心点会随缩放偏移）
- 推荐固定缩放中心：加
transform-origin: center避免按钮“漂移” - 如果按钮带图标，图标也会同步缩放+旋转；如需单独控制图标，得把图标抽成子元素并重置
transform
transition 只写一次还是分开写多个属性
写一次更安全，尤其当你要过渡多个 transform 子属性时。
错误示范：transition: scale 0.3s, rotate 0.3s —— scale 和 rotate 不是合法的 CSS 属性名，浏览器直接忽略整条规则。
正确写法只有两种：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
transition: transform 0.3s ease（推荐）—— 所有transform变化都走这个过渡 -
transition: all 0.3s ease（不推荐）—— 容易意外触发其他属性过渡，比如border-color或outline
注意：别对 width、height、margin 这类触发布局重排的属性加 transition，它们会导致卡顿；transform 和 opacity 是 GPU 加速友好型。
移动端上 button:hover 缩放+旋转为什么没反应
不是 bug，是移动浏览器根本没 hover 状态。手指点下去是 :active，松开就回退，没有“悬停停留”这回事。
强行让 hover 在移动端生效，要么靠 JS 模拟（增加复杂度），要么改用 :active：
-
button:active { transform: scale(0.95) rotate(-2deg); }—— 点按瞬间触发，反馈更真实 - 如果真要“悬停感”，得配合 JS 监听
touchstart添加 class，再用 CSS 控制，但要注意 touchend 后及时清理 class，否则状态残留 - 某些安卓 WebView 在桌面 UA 下可能临时触发 hover，但不可靠，不能作为功能依据
缩放+旋转动画卡顿或闪一下怎么办
大概率是没启用硬件加速，或者触发了 layout thrashing。
解决方法很直接：
- 给按钮加
will-change: transform（仅在真卡顿且动画频繁时用，别滥用） - 确保按钮有明确的宽高（避免由内容撑开导致每次重排）
- 别在 hover 里改
padding、border或font-size，这些都会强制重排 - 动画时间别设太短（
0.1s）或太长（1s），0.2s–0.4s最自然
最后提醒一句：动画是锦上添花，不是交互主干。如果缩放+旋转遮挡了文字、挤出了容器、或让按钮点击热区变模糊，那就该删掉，而不是调参数硬撑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
