CSS3:アイコンに回転アニメーション

goto_jp 1,184views 更新:2014年6月24日

サンプルはこちら。

See the Pen rncjE by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

オンマウスでアイコンがアニメーションします。

CSS(Sass)

a {
  ~
  .fa {
    ~
    @include transition(.2s);
  }
}
.rotate:hover .fa {
  @include transform(rotate(180deg));
}
.rotateY:hover .fa {
  @include transform(rotateY(180deg));
}

要点だけ抜き出しています。

アイコン用クラスの「.fa」にtransitionを設定しておき、「.rotate」と「.rotateY」で異なる回転方法を設定しています。

「.rotate」では通常のtransform:rotateで回転させています。
「.rotateY」ではY軸で回転させることでフリップしているように見せています。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません