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

New Font awesome引入了 rotate 表示法http://fontawesome.io/examples/

//Normal:
<i class="fa fa-shield"></i>&nbsp; normal<br>

//Rotated:
<i class="fa fa-shield fa-rotate-90"></i>&nbsp; fa-rotate-90<br>
<i class="fa fa-shield fa-rotate-180"></i>&nbsp; fa-rotate-180<br>
<i class="fa fa-shield fa-rotate-270"></i>&nbsp; fa-rotate-270<br>

//Flipped
<i class="fa fa-shield fa-flip-horizontal"></i>&nbsp; fa-flip-horizontal<br>
<i class="fa fa-shield fa-flip-vertical"></i>&nbsp; icon-flip-vertical

Answer 2

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

您将{glynticon}的显示值need to change设置为内嵌块。

以下是CSS Transforms Module：

的详细信息

可转换元素

可转换元素是以下类别之一的元素：

一个元素，其布局由CSS box模型控制，该模型是块级或原子内联级元素，或者其display属性计算为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，我将display:block添加到自定义CSS中，现在可以使用。

旋转Glyphicons /字体在Bootstrap中很棒

5 个答案: