旋转符号不转或转错方向，主要因transform-origin未设对，默认中心原点不适用于箭头类符号；应设为center right等合适值，并确保元素有宽高或display:inline-block。
transition 旋转符号不转或转错方向？检查 transform-origin 值
旋转符号（比如 ▼ → ▶）不按预期翻转，大概率是 transform-origin 没设对。默认原点在元素中心，但箭头类符号通常要绕左/右边缘或顶部中点转，否则视觉上像“飘着转”。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
transform-origin: center right;让 ▼ 绕右侧中点顺时针转 90° 变成 ▶（常见于右侧折叠按钮） - 若符号是 inline 元素（如
<span>▼</span>），先确认它有明确宽高或display: inline-block;，否则transform-origin可能失效 - 避免写
transform-origin: 50% 50%;这种冗余写法——浏览器默认就是这个值，没意义还占体积
rotate(90deg) 过渡卡顿或跳变？确保 transition 作用在 transform 上
只写 transition: all 0.2s; 很危险：它会尝试过渡所有可动画属性，一旦元素同时有 color、opacity 变化，GPU 加速可能被绕过，导致掉帧；更糟的是，某些浏览器对 all 的 transform 解析不一致，出现跳变。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 严格限定为
transition: transform 0.2s ease-in-out; - 必须配合
transform: rotate(0deg);初始状态（哪怕不转），否则首次 hover 会无过渡 - 加
will-change: transform;可提前提示浏览器该元素将动画，但仅在复杂面板频繁展开/收起时考虑，日常不用
折叠状态切换后符号角度不对？别靠 JS 算 rotate 值
有人用 JS 动态拼 rotate(90deg) / rotate(0deg)，结果状态一多就混乱：比如收起时本该回 0°，却因异步延迟又转了一次 90°，变成 180°。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用 CSS 类控制，比如
.is-open .arrow对应transform: rotate(90deg);，JS 只负责切is-open类名 - 避免在 JS 里读取
getComputedStyle(el).transform判断当前角度——矩阵值难解析，且触发重排 - 如果需支持多级嵌套折叠，每个箭头用独立类名（如
.arrow-level-1），别共用同一套 rotate 规则
IE 或旧版 Safari 不转？查 transform 和 transition 兼容性断点
transform 和 transition 在 IE10+、Safari 9+ 才稳定支持 rotate + origin 组合。IE9 及以下完全不认 transform，旧 Safari（transform-origin 的百分比值支持异常。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 不兼容时直接降级：用
display: none切换内容，符号用纯 CSS :before/:after 切换 Unicode 字符（▼/▶），不依赖 transform - 若必须用动画，加前缀（虽现代已不用）：
-webkit-transform: rotate(90deg);，但仅限 Safari ≤ 6 - 用
@supports (transform: rotate(0))包裹动画规则，让老浏览器自动忽略
最易被忽略的其实是字体渲染差异：同一 ▼ 字符在不同系统下 baseline 和字高微不同，transform-origin 设为 center center 时，Mac 和 Windows 下旋转中心可能偏移 1px——这不是 bug，是字体度量本身就不一致。真要像素级对齐，得用 SVG 箭头替代 Unicode 符号。
