点击展开侧边栏时图标不转或转错方向，主因是未配合状态切换使用transform: rotate()、未声明transition: transform 0.3s ease、硬编码角度导致逻辑错乱，或SVG/父级transform干扰；须用两个class分别控制收起/展开态旋转角度，并确保图标class与侧边栏状态同步。
点击展开侧边栏时图标不转或转错方向
常见原因是 transform: rotate() 没有配合状态切换，或者用了绝对角度（如固定写 rotate(90deg)）而没根据当前收起/展开状态动态计算。CSS 动画默认不触发重绘，单纯切换 class 但没定义过渡或没触发重排，图标就“卡住”不动。
- 必须给图标元素添加
transition: transform 0.3s ease，否则旋转无动画 - 不要硬编码角度，用两个 class 分别控制：比如
.sidebar-toggle--collapsed对应rotate(0deg)，.sidebar-toggle--expanded对应rotate(90deg) - 注意 SVG 图标内部可能有
transform或viewBox干扰，优先对最外层容器加旋转，而非直接作用在<path>上
rotate(90deg) 为什么看起来像转了 270deg？
旋转方向取决于坐标系和初始朝向。HTML/CSS 默认以元素中心为原点、顺时针为正方向。如果图标初始是「→」箭头，rotate(90deg) 会变成「↓」；但若你预期它变成「↓」却看到「↑」，大概率是图标本身已被父容器或 CSS 预设了 transform: rotate(-90deg) 或 scale(-1, 1)。
- 用浏览器开发者工具检查 computed styles，看是否有叠加的 transform 值
- 避免在多个地方设置
transform，合并成一条：比如transform: rotate(90deg) translateX(2px) - 调试时可临时加
transform-origin: center显式声明原点，防止因 box-sizing 或 padding 导致旋转偏移
JavaScript 切换旋转状态时 class 没更新
典型场景：点击按钮调用 sidebar.classList.toggle('expanded')，但图标 class 没同步更新。问题往往出在操作对象错了——你改的是侧边栏容器的 class，却忘了单独控制图标的 class。
- 要么让图标和侧边栏共用同一个状态 class（例如都监听
.sidebar.expanded，然后用 CSS 后代选择器：.sidebar.expanded .sidebar-toggle） - 要么在 JS 中显式操作图标：
toggleIcon.classList.toggle('rotated')，对应 CSS 写.rotated { transform: rotate(90deg); } - 不要用
element.style.transform = 'rotate(90deg)'直接写内联样式，它会覆盖 class 里的 transition
移动端 Safari 里 rotate 动画卡顿或失效
Safari 对 transform 的硬件加速支持较敏感，尤其在低版本 iOS 上，纯 rotate() 可能掉帧或跳变。这不是 bug，而是渲染管线没被正确触发。
立即学习“前端免费学习笔记（深入）”；
- 强制启用 GPU 加速：加
transform: rotate(90deg) translateZ(0)或will-change: transform - 避免同时修改
width/height和transform，这会导致 layout + paint 双重开销 - 如果用 Vue/React，确保 key 或 class 切换是同步的——异步 setState 后立即读取
offsetHeight可能拿不到新状态，导致旋转延迟一帧
transform-origin 默认值在不同盒模型下的差异，以及没有把旋转逻辑和侧边栏的 width/overflow 状态真正解耦。一个图标转得再准，侧边栏没推内容、没处理 focus trap，照样算失败。 
