button:hover中transform:rotate()不转动，根本原因是未在默认状态声明transition: transform，导致旋转为瞬时切换；必须配合transition才能形成可见动画，且transition须写在非hover的选择器中。
button:hover 里用 transform: rotate() 为什么转不动
常见现象是写了 button:hover { transform: rotate(360deg); } 却没反应，或者只闪一下。根本原因不是语法错，而是没配 transition —— transform 是瞬时变更，没有过渡声明，浏览器就“啪”一下切过去，人眼几乎看不到旋转过程。
实操建议：
- 必须显式加
transition: transform 0.4s ease-in-out;到默认状态（非 hover），否则 rotate 不会动 - 别写
transition: all .3s，它会把 layout 相关属性也拖进过渡，引发重排卡顿 - rotate 值推荐用
360deg或-360deg，避免小数角度（如359.9deg）导致渲染偏差 - 移动端不触发
:hover，这个动画在手机上天然失效，别把它当核心反馈
用 @keyframes 做循环旋转图标，怎么嵌进按钮里
想让按钮里的 SVG 或 Font Awesome 图标持续转（比如加载态），不能靠 :hover，得用 @keyframes + 类名控制。直接写在 :hover 里会导致鼠标一移开就停，体验断层。
实操建议：
- 内联 SVG 图标时，给
<svg></svg>加 class（如icon-spin），CSS 里写.icon-spin { animation: spin 0.8s linear infinite; } - Font Awesome 图标用
i.fa-sync这类元素，transition: transform不起作用，必须用animation配合transform: rotate() - 动画定义里别用
from/to，写成0%, 100%更稳妥，某些旧版 Safari 对 from/to 解析不稳定 - 加
will-change: transform到图标元素上可提升帧率，但仅在真有掉帧时启用，滥用会增加内存开销
旋转按钮边框时 border-radius 怎么不塌
给带圆角的按钮加 rotate() 后，边框看起来“歪了”或圆角被拉变形，其实是 transform 的渲染顺序问题：rotate 会把整个元素（含 border-radius）一起旋，而浏览器对旋转后圆角的抗锯齿处理不一致。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
实操建议：
- 把旋转动作单独交给伪元素（如
::after），按钮本体只负责圆角和背景，避免干扰 - 如果必须旋转整个按钮，
border-radius值建议用固定像素（如6px），别用百分比（如50%），后者在旋转后易失真 - 加
backface-visibility: hidden能强制开启 GPU 渲染，缓解部分 Chrome 下的边缘毛刺 - IE11 及更老浏览器不支持
transform旋转边框，若需兼容，改用 background-image 模拟旋转效果
旋转动画卡顿或闪烁，哪些 CSS 属性在拖后腿
卡顿往往不是动画本身的问题，而是其他样式在悄悄触发 layout 或 paint。比如你只动了 transform，但父容器的 width 或 padding 也在 hover 里变了，浏览器就得重算布局。
实操建议：
- 检查 hover 规则里是否混入了
margin、padding、font-size等触发布局的属性，全部剔除或移到独立 class 控制 - 用开发者工具的“Rendering”面板勾选 “Paint flashing”，看旋转时哪些区域在频繁重绘；高频闪烁区域就是性能瓶颈
- 避免在旋转元素上设
box-shadow，尤其带模糊半径的，它会极大加重绘制压力；改用outline或分层伪元素模拟 - 动画时长别低于
0.2s，太短反而因帧率不足显得卡；也别超过0.6s，用户会感知延迟
真正难的不是让按钮转起来，而是转的时候不抢主线程、不糊边、不误伤其他交互——这些细节藏在 transition 的写法里，不在 keyframes 里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
