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

サンプルはこちら。

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軸で回転させることでフリップしているように見せています。