transform: rotate() 不生效的主因是样式优先级冲突或 transform-origin 设置不当，需显式设置 display、宽高、transform-origin:center，过渡写在基态而非hover，用class切换而非内联style，并为SVG添加will-change: transform触发硬件加速。

点击展开时 transform: rotate() 不生效？检查 CSS 优先级和 transform-origin

直接写 transform: rotate(180deg) 却没反应，大概率是样式被覆盖或旋转中心点不对。默认 transform-origin 是 50% 50%（居中），但图标如果是 inline 元素（比如 <i> 或 <svg>），宽高为 0 或未设置尺寸，rotate 就“转了个寂寞”。

• 给图标元素显式设置 display: inline-block 或 display: block，并确保有明确宽高（哪怕只是 width: 20px; height: 20px;）
• 用 transform-origin: center 显式声明，避免继承父级奇怪的 origin 值
• 过渡必须写在**非 hover/active 状态的基态上**，而不是只写在 hover 里，否则首次点击无动画

用 JavaScript 切换 class 实现旋转，而不是内联 style

用 element.style.transform = 'rotate(180deg)' 会破坏 CSS 过渡——因为内联 style 优先级高于外部 transition 声明，且 JS 设置的 transform 会覆盖 CSS 中定义的 transition 属性。

• 定义两个 class：.icon-collapsed（0deg）和 .icon-expanded（180deg），都带 transition: transform 0.2s ease
• JS 只负责切换 class：iconEl.classList.toggle('icon-expanded')
• 如果菜单用 details/summary，监听 toggle 事件比监听 click 更可靠（支持键盘空格/回车触发）

SVG 图标旋转卡顿？加 will-change: transform 和硬件加速

小尺寸 SVG 在某些浏览器（尤其旧版 Safari 或 Chrome on Windows）里 rotate 动画掉帧，不是代码错，是渲染优化没跟上。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 在图标 CSS 中加 will-change: transform，提前告诉浏览器这个元素要频繁变换
• 补一句 transform: translateZ(0) 或 backface-visibility: hidden 触发 GPU 加速（注意：别滥用，仅对动画元素加）
• 避免在 rotate 同时做 opacity 或 color 动画——这些属性不触发合成层，容易和 transform 冲突导致重排

折叠状态初始旋转方向反了？用 rotate() 而不是 rotateX() 或 rotateY()

有人误用 rotateX(180deg) 想翻转箭头，结果图标消失或翻到背面——这是 3D 旋转，Z 轴没深度，视觉上就“不见了”。

立即学习“前端免费学习笔记（深入）”；

• 纯上下翻转用 rotate(180deg)（顺时针半圈），左右镜像用 scale(-1, 1)
• 如果想“向下箭头 → 向右箭头”，不是 180°，而是 rotate(90deg)；确认设计稿角度再写，别凭感觉猜
• 用 getComputedStyle(iconEl).transform 在控制台查当前矩阵，比肉眼判断更准

过渡本身很简单，真正花时间的是让旋转在各种 DOM 结构、图标格式、浏览器环境下稳定生效。别一上来就堆 animation keyframes，先确保基态 class + transform + transition 三者对齐。