手风琴图标旋转需用.btn-link:not(.collapsed) i设展开态（如rotate(180deg)），.btn-link.collapsed i设折叠态（如rotate(0)），并加transition和inline-block。
手风琴图标旋转的CSS选择器怎么写
Bootstrap 4 的手风琴（accordion）本身不自带图标旋转动画，必须手动用 CSS 控制 .collapsed 类的状态切换。关键在于：图标元素（比如 <i> 或 <span>）要和触发折叠的按钮共存于同一 <button> 内，并通过 .collapsed 是否存在来控制旋转方向。
常见错误是把图标放在 .collapse 容器内部——那样它会随内容一起淡入淡出，无法响应折叠按钮的类变化。
- 图标必须放在
<button class="btn btn-link">内部，紧邻标题文字 - 旋转依赖
transform: rotate()，配合transition实现平滑效果 - 默认状态（展开）设为
rotate(180deg)，折叠时还原为rotate(0)，或反过来，取决于设计意图
rotate(0) 和 rotate(180deg) 哪个该配 .collapsed
Bootstrap 4 的手风琴按钮在「未激活」（即对应内容收起）时自动添加 .collapsed 类；激活（内容展开）时移除该类。所以：
- 想让图标「向下箭头 → 向右箭头」表示收起 → 展开，就设默认
rotate(0)，.collapsed下rotate(90deg)（或rotate(-90deg)，看图标朝向） - 更常用的是「▼ → ▶」效果：默认
transform: rotate(180deg)（▼ 是 ▲ 旋转 180°），.collapsed下设rotate(90deg)（▶ 是 ▲ 旋转 90°），但实际更推荐用rotate(0)+rotate(90deg)避免角度叠加歧义 - 务必加
transition: transform 0.2s ease-in-out，否则旋转突兀；不要只写transition: all，性能差且可能干扰其他属性
图标旋转动画不生效的三个高频原因
不是 CSS 写错，而是结构或时机问题：
立即学习“前端免费学习笔记（深入）”；
-
<i>元素没有设置display: inline-block或display: inline-flex——transform对纯inline元素无效 - 父级
<button>设置了overflow: hidden（某些重置样式或自定义主题里有），裁剪了旋转后的图标溢出区域 - 使用了
data-toggle="collapse"但没等 Bootstrap JS 初始化完就手动操作 DOM 类，导致.collapsed类未及时更新；确保 JS 加载完成，或改用事件监听shown.bs.collapse/hidden.bs.collapse
最小可验证示例：
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne">
标题文本
<i class="fas fa-chevron-down"></i>
</button>
<div id="collapseOne" class="collapse show">...</div>
<p><style>
.btn-link i {
display: inline-block;
transition: transform 0.2s ease-in-out;
margin-left: 0.5rem;
}
.btn-link:not(.collapsed) i {
transform: rotate(180deg); /<em> 展开时向下 </em>/
}
.btn-link.collapsed i {
transform: rotate(0); /<em> 折叠时向右 </em>/
}
</style>用 Font Awesome 5+ 图标时要注意 class 冲突
FA5 的 fa-chevron-down 默认是向下，但某些版本或 CDN 加载顺序可能导致图标被其他 CSS 覆盖旋转状态。尤其注意：
- 不要同时用
fa-rotate-90这类 FA 自带旋转 class，它会和你的transform冲突 - FA 的 SVG 版本（
<svg>）需要对<svg>元素本身设transform，而不是它的父<i>—— 因为<i>可能只是占位容器 - 如果用了 FA 的
fa-fw（固定宽度），确保旋转后文字对齐不偏移，必要时加vertical-align: middle
真正容易被忽略的点：Bootstrap 4 的 .collapsed 类是在点击瞬间由 JS 添加/移除的，但 CSS 动画只响应属性变化，不保证与 JS 状态 100% 同步——若页面有大量手风琴项或低性能设备，偶发「图标转一半卡住」，此时应避免用 transform: rotateZ()，改用 transform: rotate() 并确保单位明确（如 90deg 而非 90）。
