纯css实现展开箭头顺时针旋转90度应优先使用details/summary语义化标签，通过details[open] summary::after { transform: rotate(90deg); }动态切换，配合inline-block和ease-in-out缓动实现平滑过渡。
点击展开时箭头顺时针旋转90度
关键不是“旋转多少”，而是让 transform: rotate() 随展开/收起状态动态切换。纯 CSS 实现必须依赖元素的“当前状态”——最可靠的是利用 aria-expanded 属性或 :checked（配合隐藏 checkbox），而非:hover 或 JS 添加 class（后者虽常见但破坏可访问性）。推荐用 details/summary 语义化标签，它原生支持 open 属性，CSS 可直接监听：
summary::after {
content: "▶";
display: inline-block;
transition: transform 0.2s ease;
}
details[open] summary::after {
transform: rotate(90deg);
}
注意：这里用 ▶ 字符比 SVG 或 background-image 更轻量，且旋转中心默认居中，无需额外设 transform-origin。
rotate(90deg) 不生效？检查 transform-origin 和 display
常见失效原因有两个：transform 被其他样式覆盖，或伪元素未触发渲染层。确保 summary::after 有 display: inline-block（否则 transform 对 inline 元素无效）；如果用了自定义图标（如 <svg></svg>），需确认其容器宽高不为 0，且没被 overflow: hidden 截断。另外，transform-origin 默认是 50% 50%，一般不用改，但若手动设过（比如 top left），旋转会偏移，导致视觉错位。
- 不要给
summary::after设position: absolute后又忘设top/left—— 它会脱离文档流且旋转中心偏移 - 避免在父元素上设
will-change: transform，可能干扰过渡动画 - 如果用
background-image替代字符，记得加background-size: contain并设固定宽高，否则 rotate 会拉伸失真
需要兼容 IE？放弃 rotate，改用 class 切换 background-position
IE10+ 支持 transform，但 IE9 及更早版本不支持 rotate()，且无 details/summary。此时必须用 JS 控制 class，并用雪碧图 + background-position 模拟旋转效果：
.accordion-trigger::after {
content: "";
display: inline-block;
width: 12px;
height: 12px;
background: url("arrow-sprite.png") 0 0;
}
.accordion-trigger.active::after {
background-position: -12px 0;
}
这种方案绕开了 transform 兼容性问题，但维护成本高：每新增一个状态就得切新图、更新 position 值，且无法实现平滑过渡（只能硬切）。
移动端点击无响应？summary 默认有 pointer-events: none
某些 iOS Safari 版本下，summary 的 ::after 伪元素会拦截点击，导致 details 不展开。解决方法是在 summary 上显式声明 pointer-events: auto，并确保伪元素不覆盖整个 summary 区域：
summary {
pointer-events: auto;
}
summary::after {
margin-left: 8px; /* 留出点击热区 */
}
更稳妥的做法是把箭头放在 summary 内部的 <span></span> 里，而非伪元素——这样既能用 JS 精确控制，又避免 pointer-events 的边界问题。
细节容易被忽略：旋转动画的缓动函数选 ease-in-out 比 ease 更自然，而过渡时间低于 0.15s 人眼难感知，高于 0.3s 又显得拖沓。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
