rotate不是独立CSS属性，而是transform函数值；单独写rotate(30deg)无效，必须写为transform: rotate(30deg)，且需注意单位、transform-origin、行内元素布局上下文及z-index遮挡等问题。
rotate 不是独立的 CSS 属性，它只是 transform 的一个函数值。不存在 “rotate 属性” 这种东西——所有旋转操作都必须写在 transform 里。
为什么写 rotate(30deg) 会失效？
直接写 rotate(30deg)（不带 transform: 前缀）是无效的 CSS 声明，浏览器会忽略它。
- 错误写法：
rotate: 30deg;或rotate(30deg);（单独一行，没挂靠） - 正确写法：
transform: rotate(30deg); - 如果同时用多个变换，比如旋转+平移：
transform: rotate(30deg) translateX(10px);，顺序会影响最终效果
transform: rotate() 和 transform: rotateZ() 等价吗？
在 2D 场景下，rotate(30deg) 和 rotateZ(30deg) 渲染结果完全一样，但语义不同：
-
rotate()是二维旋转，只作用于 XY 平面，隐式绕 Z 轴 -
rotateZ()明确声明绕 Z 轴旋转，属于 3D 变换体系，会触发硬件加速（某些旧浏览器更敏感） - 如果父容器设置了
transform-style: preserve-3d或perspective，用rotateZ()更稳妥，避免被降级为纯 2D - 注意：
rotateX()和rotateY()必须配合 3D 上下文（如perspective），否则可能“看不见”旋转效果——元素转到背面去了
行内元素（如 <span>）调用 transform: rotate() 没反应？
这是常见卡点：行内元素默认没有宽高、无法建立坐标系，transform 对它“无从下手”。
- 必须先赋予尺寸或布局上下文：
display: inline-block或display: block - 或者加
width/height+line-height等显式尺寸（对<span>尤其关键） - 别指望
vertical-align或margin能替代transform的定位逻辑——它们作用机制完全不同
旋转后元素“叠到别的内容上”怎么办？
transform 不改变文档流，旋转后的元素仍占据原始位置，只是视觉上偏移了。这常导致遮挡或点击错位。
立即学习“前端免费学习笔记（深入）”；
- 想让周围内容“跟着动”，得用
position: relative+top/left等传统位移（但会触发重排） - 想保持性能又避免遮挡，可用
z-index控制层叠顺序 - 若需真实重排布局（比如旋转后腾出空间），只能改 HTML 结构或用 JS 计算新尺寸后手动调整 margin/padding
transform-origin: 50% 50%）。如果没意识到这点，做按钮 hover 旋转时可能发现它“歪着转”，而不是绕自己中心匀速转——这时候就得主动设 transform-origin，而不是只盯着 rotate()。 
