直接用transform: rotate()不行，必须配合@keyframes和animation才能实现动画；单位缺失（如写rotate(90)而非rotate(90deg)）会导致声明失效；内联元素需设display:inline-block或block；rotate不作用于filter中；overflow:hidden会裁剪旋转后溢出部分；支点切换须用transform-origin配合。
直接用 transform: rotate() 就行，单位必须是 deg，写成 rotate(45) 会完全失效。
为什么 rotate() 没反应？常见错误检查
很多页面加了 rotate() 却没效果，不是浏览器问题，而是以下几处写错了：
-
rotate()被误塞进filter里，比如filter: blur(1px) rotate(30deg)——filter不支持rotate，得单独写在transform属性里 - 漏掉单位：写成
rotate(90)❌，必须是rotate(90deg)✅ - 父容器设置了
overflow: hidden，但旋转后图片视觉尺寸变大，超出部分被裁掉，看起来像“没动”，其实是被剪了 - 用了
skew(10deg)以为是旋转，结果图片被拉斜变形，四边不再平行——skew是倾斜，rotate才是真正绕点转动
怎么让图片绕左上角、底部或自定义点旋转？
默认以元素中心为原点，要换支点就得配 transform-origin。它不独立生效，必须和 transform: rotate() 一起用：
-
transform-origin: top left→ 绕左上角顺时针转90deg，图片右下部分会甩出去 -
transform-origin: bottom center→ 绕底部中点转，适合做“掀盖”式动画 -
transform-origin: 20px 30px→ 用像素精确定位，注意坐标系原点在左上，不是图片中心 - 如果同时用了
scale()或translate()，transform-origin对所有变换都起效，不是只管rotate
旋转后图片撑破容器或错位，怎么办？
旋转不改变元素的布局占位（layout size 还是原图宽高），但视觉上外接矩形变大了。比如 200×200 的图转 45°，外框约需 283×283 空间。解决方式取决于你要的效果：
立即学习“前端免费学习笔记（深入）”；
- 想“视觉上不溢出”：给父容器加
overflow: hidden，最简单直接 - 想“自动缩放适配”：手动试值加
scale()，例如transform: rotate(30deg) scale(0.7)；更稳的做法是用 JS 计算外接矩形再反推缩放比 - 想“预留空间不滚动”：给父容器加
padding，比如转 30° 就预估留 30–40px 边距 - 用
object-fit: cover配合固定宽高的容器，再旋转——注意它不影响transform的布局计算，只是控制图片如何填满
IE8 还要兼容吗？现代项目别硬套 filter
IE9+ 原生支持 transform: rotate()，IE8 及更早版本直接忽略该样式。有人翻旧资料找 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1)，但它只支持 0/90/180/270 四个整数角度，且已废弃。
现实判断：查下你项目的真实用户 UA 数据，如果 IE8 流量 @supports (transform: rotate(1deg)) 特性检测即可。
