如何在不使用 javascript 的情况下旋转 glyphicon？答案

【问题标题】：How to rotate glyphicon without using javascript?如何在不使用 javascript 的情况下旋转 glyphicon？
【发布时间】：2017-06-11 08:38:48
【问题描述】：

我正在使用 twitter 引导程序，我有 glyphicon-menu-up。当我单击该图标时，它会折叠并展开内容。

但是，当我单击图标时，我想使用 CSS 将图标旋转 180 度。我知道如何使用 Javascript 来做到这一点。但我只想使用 CSS 来实现。

这是部分工作的JSFiddle Demo

【问题讨论】：

【解决方案1】：

正如这个类似的 QA 建议的那样，如果您想要纯 CSS 解决方案，请尝试 :active。

【讨论】：

【解决方案2】：

您的示例无论如何都使用 JavaScript 来触发 div 的折叠状态。无论哪种方式，如果您从开发控制台查看标记，您可以看到在单击时将.collapsed 类添加到触发器（在本例中为您的按钮）。

你可以修改你当前的 css 来让它工作：

.collapsed .glyphicon-menu-up {
  transform: rotate(180deg);
}

【讨论】：