Bootstrap 中的旋转 Glyphicons / Font Awesome

Question

我正在尝试让我的引导站点中的字形图标在悬停时旋转（除了改变颜色）。

这是我的尝试：http://jsfiddle.net/young_greedo17/88g5P/

...使用此代码：

<div class="widgetbox">
    <br><br>
    <div class="icon-calendar icon-large"></div>
    <h5>Add an event</h5>
</div>

...这是CSS：

.widgetbox {
    width: 250px;
    height: 250px;
    background-color: black;
    color: white;
    text-align: center;
}
.widgetbox [class*="icon-"] {
    -webkit-transition-duration: 1.0s;
    -moz-transition-duration: 1.0s;
    -o-transition-duration: 1.0s;
    transition-duration: 1.0s;

    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
}
.widgetbox:hover [class*="icon-"] {
    color: #24a159 !important;
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
    transform:rotate(360deg);
}

这是我希望在悬停时发生的事情的示例（请参阅四列小部件框 ATF）：http://themeforest.net/item/flatnica-ultimate-flat-template/full_screen_preview/5343665

显然，颜色会发生变化，但即使这样也不会根据我在 CSS 中为过渡设置的参数而改变。

谢谢！

Answer 1

新字体真棒引入了 rotate 符号（运行下面的代码 sn-p 以查看它的实际效果）http://fontawesome.io/examples/

只需从 fa-rotate-90（90 或 180、270）和 fa-flip-horizo​​ntal（水平或垂直）添加一个 MODIFIER CLASS。

<i class="fa fa-head-side-mask"></i>normal<br>
<i class="fa fa-head-side-mask fa-rotate-90"></i>
<i class="fa fa-head-side-mask fa-flip-horizontal"></i>
<i class="fa fa-head-side-mask fa-rotate-90 fa-flip-horizontal"></i>

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>

<br>Normal:<br>

    <i class="fa fa-head-side-mask"></i>normal<br>

<br>Rotated:<br>

    <i class="fa fa-head-side-mask fa-rotate-90"></i>fa-rotate-90<br>
    <i class="fa fa-head-side-mask fa-rotate-180"></i>fa-rotate-180<br>
    <i class="fa fa-head-side-mask fa-rotate-270"></i>fa-rotate-270<br>
    
<br>Flipped:<br>

    <i class="fa fa-head-side-mask fa-flip-horizontal"></i> fa-flip-horizontal<br>
    <i class="fa fa-head-side-mask fa-flip-vertical"></i>  fa-flip-horizontal<br>
    
    
<br>Rotated and Flipped:<br>

    <i class="fa fa-head-side-mask fa-flip-vertical fa-rotate-90"></i>fa-flip-vertical fa-rotate-90

Answer 2

问题是您正在尝试转换 inline 元素 - 这是不可能的。

您将need to change 字形图标的显示值嵌入到块中。

---

这里是来自CSS Transforms Module的详细信息：

可变形元素

可变形元素是属于以下类别之一的元素：

• 一个元素，其布局由 CSS 框模型控制，它是块级或原子内联级元素，或者其显示属性计算为 table-row、table-row-group、table-header -group、table-footer-group、table-cell 或 table-caption [CSS21]

• SVG 命名空间中的一个元素，不受 CSS 盒子模型的约束，它具有属性 transform、'patternTransform' 或 gradientTransform [SVG11]`

Answer 3

font-awesome.css 文件为您的选择器设置display: inline：[class^="icon-"], [class*="icon-"]。您可以在 CSS 文件的第 161 行看到这一点：

[class^="icon-"],
  [class*=" icon-"] {
  display: inline;
  width: auto;
  height: auto;
  line-height: normal;
  vertical-align: baseline;
  background-image: none;
  background-position: 0% 0%;
  background-repeat: repeat;
  margin-top: 0;
} 

因此您需要将.widgetbox [class*="icon-"] 设置为具有display: block; 属性 http://jsfiddle.net/88g5P/6/

编辑：查看display:block; 和display:inline-block; 之间的差异后，我发现了simple visual answer on Stack overflow。基于这个答案，最好使用display:inline-block

Answer 4

您需要覆盖图标的显示设置，因为旋转不适用于内联元素

.widgetbox [class*="icon-"] {

     ...

     display:block;
}

Answer 5

在您的特定情况下，问题是您使用的图标有 display: inline-block，我在自定义 CSS 中添加了 display:block，现在它可以工作了。