10分で作れる！初心者でも簡単にできるCSS3アニメーション その１

全世界の皆さん、おはこんばんにちわ。

そして
新年あけましておめでとうございます！

今回はCSSを使ってボタンが回転するアニメーションを作っていきたいと思います！

１.アイコン画像の用意！

まず、
　　
こんな感じのアイコン画像を用意します。大きさは50px×50pxです。まぁサイズは何でもいいんですけど
あ、でも回転するので細長い画像よりも正方形や円形の方がいいですよ！

２.HTML

次はHTMLをかいていきます。
HTMLは簡単でとってもシンプルです。

<div class="icons_spin">
    <a href="URL" class="twitter" title="twitter">Twitter</a>
    <a href="URL" class="facebook" title="facebook">Facebook</a>
    <a href="URL" class="rss" title="rss">RSS</a>
</div>

こんな感じにdivタグで囲っておくだけでOKです。まだアイコン画像はなくてもいいです。

３.CSS

ここからはCSSでの作業になります。
まず、このようにかきます。

.icons_spin a{
    width:50px;
    height:50px;
    display:inline-block;
    text-indent:-9999em;
    overflow:hidden;
}

.twitter{ background:url('../images/twt.png'); }←画像のある階層を間違えないように！
.facebook{ background:url('../images/fb.png'); }
.rss{ background:url('../images/rss.png'); }

とりあえずここまで！
widthとheightはサイズということは分かると思います。
では、display:inline-block;とはなんぞや？という人もいるかもしれませんので簡単に説明しますと、
display:inline-block;は画像を横並びにする時にしようします。
floatでもできますが、floatだと

IE6ではfloatと同方向のpadding、marginが2倍になってしまったり
高さが異なるボックスがあるとその後のレイアウトが崩れる
と、色々面倒なのでdisplay:inline-block;にしました。

そしてようやくここでアイコン画像の登場ですね！
画像をa要素の背景にします。
回転させる部分は画像本体というよりも、正確にはa要素です。
次にいよいよ回転させるようにしていきます。

４．回転させる！

ようやくここで回転するようにしていきます。
ここではこのようにかいていきます。

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

transformは文字や画像を拡大・縮小、移動、回転などを指定出来るプロパティです
今回は回転なのでrotate(deg)を使います。
360degとは360度くるっと回転するという意味です。
360degで時計回りに360度回転、

• 360degで反時計回りに360度回転します。

transition: transform 0.5s ease-out;の部分は
0.5秒までに回転するようになっています。
ease-outはゆっくりなめらかに回転が終わるという意味です。

５．完成ッ！

　　

マウスオーバーすることで時計回りに１回転します！
上手くできましたか？

上記はコピペでも使えます。アイコンなどに是非使ってみてください。

transformを使えば文字や画像を拡大・縮小、移動、回転など色々できて
おもしろいアニメーションが作れますよ！

ではでは