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);
}

ホバー時に何が起こるかの例を次に示します (4 列のウィジェット ボックス ATF を参照): http://themeforest.net/item/flatnica-ultimate-flat-template/full_screen_preview/5343665

当然、色は変わりますが、CSS でトランジション用に設定しているパラメーターに従っても、色は変わりません。

ありがとう！

4

5 に答える 5

19

問題は、要素を変換しようとしていることですinline- これは不可能です。

グリフィコンの表示値をインライン ブロックに変更する必要があります。

CSS Transforms Moduleの詳細は次のとおりです。

変形要素

変形可能な要素は、次のいずれかのカテゴリの要素です。

  • ブロックレベルまたはアトミックインラインレベル要素である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ファイル セット: . これは、CSS ファイルの 161 行目で確認できます。display: inline[class^="icon-"], [class*="icon-"]

[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;
}

したがって、プロパティhttp://jsfiddle.net/88g5P/6/.widgetbox [class*="icon-"]を持つように設定する必要がありますdisplay: block;

display:block;編集:との違いを調べた後、 Stack Overflow に関するdisplay:inline-block;この単純な視覚的な答えに出くわしました。この回答に基づいて、おそらく使用する方が良いでしょうdisplay:inline-block

于 2013-09-04T03:29:44.130 に答える
1

回転はインライン要素では機能しないため、アイコンの表示設定をオーバーライドする必要があります

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

     ...

     display:block;
}
于 2013-09-04T03:42:43.373 に答える