[CSS]ホバー時にアイコンをくるっと回転させるCSS3アニメーションのテクニック

アイコンをマウスホバーすると、くるっと360度回転させて、ユーザーの目を引きつけるCSS3アニメーションのテクニックを紹介します。

CSS3 Spinning Social Media Icons

[ad#ad-2]

• デモ
• 実装

デモ

デモでは水平状に配置された各ソーシャルメディアのアイコンが、マウスホバーでくるっと回転します。

デモページ

実装

HTML

HTMLは非常にシンプルで、各ソーシャルメディアのリンクをdivタグで内包しているだけです。

<div class="spinning_icons">
    <a href="http://www.twitter.com/paulund_" class="twitter" title="twitter">Twitter</a>
    <a href="http://www.twitter.com/paulund_" class="delicious" title="delicious">Delicious</a>
    <a href="http://www.twitter.com/paulund_" class="digg" title="digg">Digg</a>
    <a href="http://www.twitter.com/paulund_" class="dribbble" title="dribbble">Dribbble</a>
    <a href="http://www.twitter.com/paulund_" class="email" title="email">Email</a>
    <a href="http://www.twitter.com/paulund_" class="facebook" title="facebook">Facebook</a>
    <a href="http://www.twitter.com/paulund_" class="flickr" title="flickr">Flickr</a>
    <a href="http://www.twitter.com/paulund_" class="foursquare" title="foursquare">Foursquare</a>
    <a href="http://www.twitter.com/paulund_" class="linkedin" title="linkedin">Linkedin</a>
    <a href="http://feeds.feedburner.com/Paulundcouk" class="rss" title="rss">RSS</a>
    <a href="http://www.twitter.com/paulund_" class="stumbleupon" title="stumbleupon">Stumbleupon</a>
    <a href="http://www.twitter.com/paulund_" class="youtube" title="youtube">YouTube</a>
</div>

[ad#ad-2]

CSS

各a要素の共通スタイルです。「display:inline-block;」を使用して、アイコンが隣同士になるように配置します。
ソーシャルメディアの画像は背景として、後ほどセットします。

.spinning_icons a{
    width:48px;
    height:48px;
    display:inline-block;
    text-indent:-9999em;
    background-position:0 0;
    background-repeat:no-repeat;
    z-index:2000;
    overflow:hidden;
}

各ソーシャルメディアの画像をa要素の背景としてセットします。

.twitter{ background:url('icons/twitter_32.png'); }
.delicious{ background:url('icons/delicious_32.png'); }
.digg{ background:url('icons/digg_32.png'); }
.dribbble{ background:url('icons/dribbble_32.png'); }
.email{ background:url('icons/email_32.png'); }
.facebook{ background:url('icons/facebook_32.png'); }
.flickr{ background:url('icons/flickr_32.png'); }
.foursquare{ background:url('icons/foursquare_32.png'); }
.linkedin{ background:url('icons/linkedin_32.png'); }
.rss{ background:url('icons/rss_32.png'); }
.stumbleupon{ background:url('icons/stumbleupon_32.png'); }
.youtube{ background:url('icons/youtube_32.png'); }

くるっと回転させるのは画像要素ではなくa要素です。
a要素を0.2秒で360度回転するようにセットします。

.spinning_icons a:hover{
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    transition: transform 0.2s ease-out;
    -webkit-transition: -webkit-transform 0.2s ease-out;
    -moz-transition: -moz-transform 0.2s ease-out;
}