18

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

这是我的尝试：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 中为过渡设置的参数而改变。

谢谢！

4

5 回答 5

22

新字体真棒引入了旋转表示法（运行下面的代码片段以查看它的实际效果）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

于 2013-11-07T14:24:54.057 回答
19

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

您需要将字形图标的显示值更改为内联块。

以下是CSS 转换模块的详细信息：

可变形元素

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

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

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

于 2013-09-04T03:25:19.950 回答
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;我在 Stack overflow 上找到了这个简单的视觉答案。基于这个答案，最好使用display:inline-block

于 2013-09-04T03:29:44.130 回答
1

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

于 2013-09-04T03:51:59.353 回答
1

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

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

     ...

     display:block;
}
于 2013-09-04T03:42:43.373 回答