rotate(180deg)不生效主因是display: none导致元素脱离渲染树，应改用visibility: hidden+max-height过渡，并显式设置transform-origin: center或具体坐标确保旋转中心准确。
点击展开时 rotate(180deg) 不生效？检查 transform-origin 和 display 切换
直接加 transform: rotate(180deg) 却没转，大概率是元素被设了 display: none。CSS transform 对 display: none 元素完全不生效——它根本不在渲染树里。改用 visibility: hidden + height: 0 或 max-height 过渡，再配合 transform 才能动起来。
还要注意默认旋转中心点：transform-origin: center 是常规选择；如果图标偏上或靠右，得显式设成 transform-origin: 50% 50% 或具体像素值，否则看起来像“歪着转”。
- 别用
display: none/block控制显隐 → 改用max-height+overflow: hidden - 确保父容器没有
transform或perspective干扰子元素的旋转坐标系 - 图标如果是 SVG，优先对
<svg></svg>或内部<g></g>加 transform，别只动<path></path>
用 CSS transition 实现平滑旋转，但只转一次？补上 transition: transform 0.2s ease 和重置状态
手风琴常复用同一组 DOM，点开 A、再点开 B，A 收起时图标该转回去，但可能卡在 180° 不动——这是因为 CSS transition 只响应属性变化，而收起时若 class 移除但没触发重排，浏览器可能跳过过渡。
安全做法是：收起时先移除旋转 class，setTimeout(() => {}, 0) 强制重排，再加回基础 class（含初始 transform: rotate(0)）；或者统一用一个 class 控制，靠 JS 切换 data 属性驱动 CSS：
details[open] .accordion-icon { transform: rotate(180deg); }
这样更可靠，无需手动管理状态时机。
- 必须给
transform单独写 transition，不要写成transition: all 0.2s—— 会拖慢其他属性动画 - IE 不支持
transform在inline元素上动画，图标用<span></span>或<i></i>时记得加display: inline-block - 移动端 Safari 对
transform+will-change: transform更友好，但别滥用，只加在频繁动画的图标上
SVG 图标旋转错位？用 viewBox 对齐 + transform-box: fill-box
SVG 图标旋转时“飘走”或缩放，基本是 viewBox 和实际尺寸没对齐。比如 viewBox="0 0 24 24" 但容器宽高是 16px，CSS 缩放后坐标系偏移，rotate 就绕错中心转。
解法很直接：让 SVG 自身撑满容器，并锁定变换盒子范围：
<svg class="accordion-icon" viewbox="0 0 24 24" width="1em" height="1em"><path d="M7 10l5 5 5-5z"></path></svg>
再加 CSS：
.accordion-icon {
transform: rotate(0);
transform-box: fill-box; /* 关键：让 transform 以内容盒为基准 */
transform-origin: center;
}
- 避免用
width/height直接设像素值 → 改用em或rem保持缩放一致性 -
transform-box: fill-box在 Firefox 和 Safari 需要前缀-webkit-transform-box，Chrome 95+ 原生支持 - 如果图标是字体图标（如 Font Awesome），用
::before伪元素加 transform 更稳，且不用操心 viewBox
JS 控制旋转状态时，classList.toggle() 比 setAttribute() 更准
用 el.setAttribute('class', 'icon rotate') 容易覆盖原有 class，导致样式丢失；而 el.className = 'icon rotate' 更危险——会清空所有动态 class。手风琴常需同时维护 “active”、“loading”、“disabled” 等状态，硬写 class 字符串极易出错。
正确姿势是只管旋转这个行为：
button.addEventListener('click', () => {
const icon = button.querySelector('.accordion-icon');
icon.classList.toggle('rotated'); // 只切这个 class
});
CSS 里定义：
.accordion-icon.rotated { transform: rotate(180deg); }
- 别在 JS 里拼字符串操作 class →
classList是标准且原子性的 - 如果多个手风琴共用同一图标 class，用事件委托 +
closest()定位最近的 icon，避免 querySelector 全局搜索 - 需要兼容旧浏览器？
icon.className += ' rotated'要加空格防粘连，但不如 classList 可靠
真实项目里最常漏掉的是 transform-origin 和 display: none 的冲突——这两处一错，旋转就静止了。其余都是细节微调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
