手风琴菜单旋转图标在Bootstrap中的实现_利用CSS变量控制transform

作者：袖梨 2026-06-08

手风琴展开时图标旋转180度应使用CSS变量--bs-accordion-icon-transform统一控制，配合.accordion-button::after的transition实现平滑动画，避免硬编码角度或JS干预。

手风琴展开时图标如何旋转180度

直接用 transform: rotate(180deg) 最简单，但硬编码角度值会让后续调整（比如改成90度翻转）变得麻烦。Bootstrap 5+ 支持 CSS 变量，推荐把旋转角度抽成 --bs-accordion-icon-transform，这样全局统一、主题可换。

默认 Bootstrap 的手风琴图标是通过伪元素 ::after 渲染的，它本身已定义了 transform，所以你只需覆盖这个变量即可生效：

:root {  --bs-accordion-icon-transform: rotate(180deg);}

注意：这个变量只在 .accordion-button:not(.collapsed) 下被使用，无需手动写 JS 切类或监听事件。

为什么加 transition 却没动画效果

常见错误是只给 transform 加过渡，但没指定作用对象——Bootstrap 的图标是伪元素，必须显式对 ::after 设置 transition：

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

✅ 正确写法：.accordion-button::after { transition: transform 0.2s ease-in-out; }
❌ 错误写法：只写 .accordion-button { transition: transform ...; }（父元素 transform 不影响伪元素）
如果用了自定义 SVG 或背景图图标，要确保它被包裹在 ::after 里，或改用 background-position + transition 替代

用 CSS 变量切换多种旋转方向（上/下/右）

除了 180° 垂直翻转，有时需要水平收起（→←）或顶部展开（↑↓）。这时别写多套 class，直接复用变量：

.accordion-flip-right .accordion-button:not(.collapsed)::after {  --bs-accordion-icon-transform: rotate(90deg);}.accordion-flip-up .accordion-button:not(.collapsed)::after {  --bs-accordion-icon-transform: rotate(-90deg);}

关键点：

变量作用域是伪元素自身，所以必须在 ::after 选择器里覆盖，不能只挂到 .accordion-button
Bootstrap 5.3+ 才正式将 --bs-accordion-icon-transform 作为公开变量；旧版本需先查源码确认是否支持，否则得用 !important 强制覆盖
若图标用的是 background-image，旋转无效，应改用 mask-image + transform 或直接换 SVG