5

アイコンを回転させようとしていますがtransform: rotateZ(90deg)、無視しているようです。

アイコンにトランジションを追加すると、アイコンが回転するアニメーションが表示されますが、アニメーションが完了すると元の位置に戻ります。

ここにあります：

@import url(http://weloveiconfonts.com/api/?family=fontawesome);

/* fontawesome */
[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
}

span {
  transition: 2s;
  border: 1px solid red;
  font-size: 500px;
}

span:hover {
  transform: rotateZ(90deg);
}
<span class="fontawesome-download-alt"></span>

4

2 に答える 2

8

<span>はインライン要素であり、インライン要素は「変形可能」ではないためです。displayプロパティを に変更するだけinline-blockです。

W3C から:

変形要素

変形可能な要素は、次のいずれかのカテゴリの要素です: レイアウトが CSS ボックス モデルによって管理され、ブロック レベル要素またはアトミック インライン レベル要素のいずれかである要素、または表示プロパティが table-row、table-row に計算される要素-group、table-header-group、table-footer-group、table-cell、または table-caption [CSS21]

W3C によると、インライン要素は「変換可能」としてリストされていません。

例

@import url(http://weloveiconfonts.com/api/?family=fontawesome);

/* fontawesome */
[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
}

span {
  transition: 2s;
  border: 1px solid red;
  font-size: 500px;
  display: block;
/* ^^ Change this */
}

span:hover {
  transform: rotateZ(90deg);
}
<span class="fontawesome-download-alt"></span>

于 2014-12-16T21:24:23.240 に答える
1

SPAN ではなく DIV を使用します。幅と高さを設定し、すべてのブラウザで動作するようにdisplay:block; 追加-webkit-transition: 2s;します。-webkit-transform:rotateZ(90deg);以下のコードを参照してください。

<style>
@import url(http://weloveiconfonts.com/api/?family=fontawesome);

/* fontawesome */
[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
}

div {
  -webkit-transition: 2s;
  transition: 2s;
  border: 1px solid red;
  font-size: 500px;
  display: block;
  width: 470px;
  height: 470px;
}

div:hover {
  -webkit-transform:rotateZ(90deg);
  transform: rotateZ(90deg);
}
</style>

<div class="fontawesome-download-alt"></div>
于 2014-12-16T21:40:15.217 に答える