on:2012年1月10日sponsorsアイコンをマウスホバーすると、くるっと360度回転させて、ユーザーの目を引きつけるCSS3アニメーションのテクニックを紹介します。Icons[ad#ad-2]デモ実装デモデモでは水平状に配置された各ソーシャルメディアのアイコンが、マウスホバーでくるっと回転します。デモページ実装HTMLHTMLは非常にシンプルで、各ソーシャルメディアのリンクをdivタグで内包しているだけです。title="youtube">YouTube</a></div>[ad#ad-2]CSS各a要素の共通スタイルです。「display:inline-block;」を使用して、アイコンが隣同士になるように配置します。ソーシャルメディアの画像は背景として、後ほどセットします。overflow:hidden;}各ソーシャルメディアの画像をa要素の背景としてセットします。}くるっと回転させるのは画像要素ではなくa要素です。a要素を0.2秒で360度回転するようにセットします。