CSS transformを使ったシンプルなマウスホバー

現在使用されているブラウザのほぼ100％くらいがCSS3のtransformプロパティに対応しているので、マウスホバーエフェクトなどは、昔のようにJavaScriptを使わなくとも実装できるようになっています。

参考サイト
http://codepen.io/littlesnippets/pen/VeeNYP
http://codepen.io/littlesnippets/pen/WQXQGq
http://codepen.io/littlesnippets/pen/jWeyvx

CSS3のtransformを使ったマウスホバーエフェクトサンプルを参考サイトを元にまずはシンプルな形にアレンジして作ってみました。

CSSだけで下のサンプル動画のような動きのものです。

CSSホバーエフェクの解説

上記サンプル動画の右上から2個目の上から窓が閉じるような動きのCSSでtransformを使ったアニメの解説をします。この動きがわかれば、アレンジでいろいろな動きができるようになります。

解説用サンプルCSSファイル

2行目からボタンの基本的設定をしています。
12行目からtransitionで動きの速度や滑らかさなどを設定しています。allとしているところは全部のプロパティを対象にとしています。個別に設定する場合は、「transition:opacity .3s,background-color .6s」などと設定します。
またease-in-outの部分は動きの滑らかさなどを設定する部分となります。
リファレンス参照

28行目で::after擬似要素で閉じる窓を設定します。

37行目のtransform-originで動きの起点を設定します。50% 0%とすることで横の位置は中央で縦の位置はトップが起点になります（ベンダープレフィックスがいっぱい付いていますが、2017年には、もう少し少なくてすむと思われますがとりあえずつけています。）。

42行目からtransformでウィンドウが開いているように設定しています。
perspective()は、 3D効果を出すために平面と視点との距離を設定します。
リファレンス参照

rotateXで縦方向の回転を設定します。単位のdegは角度となり、90度回転させるという意味になります。transform-originで設定した起点を中心に回転します。

50行目からはマウスホバー時に角度を0にすることで、90度に回転した要素を0度までアニメーションしてくれます。

一般的なマウスホバーエフェクトサンプル（別ページが開きます）

アレンジを加えたホバーエフェクサンプル

動きをいろいろアレンジして、もっと複雑はエフェクトアニメーションを加えることができます。
▼▼作成したマウスホバーのサンプル動画▼▼

上記の動きの各サンプルページ
サンプル1
サンプル2
サンプル3
サンプル4

上記のサンプルページのソースを見て参考にしていただければと思います。