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