旋转Glyphicons /字体在引导 [英] Rotating Glyphicons / Font Awesome in Bootstrap

问题描述

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

I'm trying to get the glyphicons in my bootstrap site to rotate on hover (in addition to changing color).

这是我的尝试：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：

... here's the 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

Here's an example of what I'm looking to happen on hover (see four column widget box ATF): http://themeforest.net/item/flatnica-ultimate-flat-template/full_screen_preview/5343665

显然，颜色会发生变化，但即使这样也不会根据我为转换设置的参数而改变

Obviously, the color changes, but even that doesn't change in accordance with the parameters I'm setting for the transition in the CSS.

谢谢！

推荐答案

问题是

您将会

You'll need to change the display value of the glyphicon to inline block.

以下是 CSS转换模块：

可变元素

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

A transformable element is an element in one of these categories:

• 一个元素，其布局由CSS框模型控制，该框模型是块级或原子行内元素，或者其显示属性计算为table-row，table-row-group ，SVG命名空间中的元素，table-header-group，table-footer-group，table-cell或table-caption [CSS21]

  • an element whose layout is governed by the CSS box model which is either a block-level or atomic inline-level element, or whose display property computes to table-row, table-row-group, table-header-group, table-footer-group, table-cell, or table-caption [CSS21]

    由具有属性transform，'patternTransform'或gradientTransform [SVG11]'的CSS框模型控制

    an element in the SVG namespace and not governed by the CSS box model which has the attributes transform, ‘patternTransform‘ or gradientTransform [SVG11]`

    这篇关于旋转Glyphicons /字体在引导的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！