hover 触发的 transform 旋转不生效主因是 img 默认 inline 导致 transform 无效，或父容器 overflow: hidden 裁剪旋转内容；需设 display: block/inline-block、加 transition 动画、确保 rotate() 带单位（如 360deg）、检查 object-fit 和 border-radius 配合，并添加 will-change 提升性能。
hover 触发的 transform 旋转为啥不生效
常见现象是写了 :hover { transform: rotate(360deg); }，但鼠标移上去头像纹丝不动。核心原因就两个：没给元素设 display: block 或 inline-block（img 默认是 inline，transform 对 inline 元素的某些情况无效）；或者父容器有 overflow: hidden 但旋转后超出裁剪了，看起来像没动。
- 确保头像元素是块级或行内块：
img { display: block; }或img { display: inline-block; } - 加
transition才能看到动画效果，否则是瞬时跳变：transition: transform 0.4s ease; - 如果头像被包在
div里，检查该div是否有overflow: hidden且尺寸刚好卡死——旋转时边缘会出界，视觉上像“卡住”
rotate() 的数值和单位必须写对
rotate() 只接受角度值，不支持像素、百分比或无单位数字。写成 rotate(360)（缺 deg）在部分浏览器里会静默失败，尤其旧版 Safari 和 Firefox。
- 必须带单位：
rotate(360deg)、rotate(1.5turn)、rotate(2πrad)都合法，但日常用deg最稳妥 - 负值可反向旋转：
rotate(-90deg) - 多次旋转叠加用空格分隔：
transform: rotate(45deg) scale(1.1);，顺序影响最终效果（先旋再缩，和先缩再旋结果不同）
圆形头像 + 旋转容易露马脚的细节
用 border-radius: 50% 做圆角头像时，旋转中如果图片本身不是正方形，或容器宽高不等，会出现拉伸、错位、白边等“破圆”现象，让人一眼看出不是真圆。
- 头像
img必须是正方形原始图，或用object-fit: cover强制裁切：img { width: 100px; height: 100px; object-fit: cover; border-radius: 50%; } - 避免只靠
border-radius: 50%去“盖”矩形图——那只是视觉遮罩，旋转时四个角依然会透出背景 - 如果用
background-image实现头像，记得加background-size: cover和background-position: center
性能与兼容性要盯住 will-change 和前缀
高频 hover 旋转在低端设备或老浏览器上可能掉帧。单纯加 transform 不够，得告诉浏览器“这个元素要动”，提前启用 GPU 加速。
- 加上
will-change: transform;能显著改善动画流畅度，但别滥用——只加在真正需要 hover 动画的元素上 - IE10/11 需要
-ms-transform前缀，不过现在基本可忽略；Safari 8-13.1 需要-webkit-transform，建议保留 - 示例完整写法：
img { transform: rotate(0deg); -webkit-transform: rotate(0deg); transition: transform 0.3s ease; will-change: transform; }，hover 里只改rotate(360deg)
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
