【CSS】CSSのanimationを使って色々な回転をさせてみよう

CSSのアニメーションは色んな事ができますね。
今回はanimationを使って色々な回転設定をしてみたいと思います。

1 表示のイメージ動画
2 ベースのコーディング
3 回転CSSの種類
4 まとめ
5 CSSコーディングのオススメ本

表示のイメージ動画

360度、縦、横、斜め、奥行を使った3D回転とCSSだけで色々な回転の設定をする事ができます。

ベースのコーディング

HTMLコード

ベースになるHTMLを組みます。
今回は動画を元に6つの回転を設定しますので、それぞれにclassを設定したdivを6つ用意します。

<div class="rotation ro1"><span></span></div>
<div class="rotation ro2"><span></span></div>
<div class="rotation ro3"><span></span></div>
<div class="rotation ro4"><span></span></div>
<div class="rotation ro5"><span></span></div>
<div class="rotation ro6"><span></span></div>

CSSコード

6つの共通部分を設定します。

.rotation
{
 animation:2s linear infinite;
 background-color: #7ca713;
 width: 150px;
 height: 150px;
 margin: 0 30px;
}

大事なのは「animation」です。
スピード（2s）、定速回転（linear）、回転のリピート（infinite）を設定します。

回転CSSの種類

それぞれの回転設定は以下の通りになっています。

※動画左から

360°回転のCSS

円を描く様に360°回転します。

.ro1{animation-name: ro360;}
		
@keyframes ro360
{
 0%{ transform:rotate(0);}
 100%{ transform:rotate(360deg); }
}

逆回転

360degを-360degに変更すると逆回転になります。

@keyframes ro360
{
 0%{ transform:rotate(0);}
 100%{ transform:rotate(-360deg); }
}

縦回転CSS

X軸を設定して縦に回転します。

.ro2{animation-name: roX;}
		
@keyframes roX
{
 0%{ transform:rotatex(0);}
 100%{ transform:rotatex(360deg); }
}

横回転CSS

Y軸を設定して横に回転します。

.ro3{animation-name: roY;}

@keyframes roY
{
 0%{ transform:rotatey(0);}
 100%{ transform:rotatey(360deg); }
}

斜め回転（左上軸）

左上を軸として斜めに回転します。

.ro4{animation-name: roZ;}
		
@keyframes roZ
{
 0%{ transform:rotate3d(0);}
 100%{ transform:rotate3d(1,1,0,360deg); }
}

斜め回転（右上軸）

右上を軸として斜めに回転します。

.ro5{animation-name: roZ2;}
		
@keyframes roZ2
{
 0%{ transform:rotate3d(0);}
 100%{ transform:rotate3d(1,-1,0,360deg); }
}

3D回転

縦、横、奥行を使った回転。

.ro6{animation-name: roZ3;}
		
@keyframes roZ3
{
 0%{ transform:rotate3d(0);}
 100%{ transform:rotate3d(1,1,1,360deg); }
}

まとめ

CSSアニメーション色々できて面白いです！
回転以外にもやってみたいと思います。

CSSコーディングのオススメ本

CSS辞典第5版 [CSS2/3/4対応]

本書は、Webデザインに必須の技術「CSS」の文法リファレンスです。大幅改訂となる第5版は、現時点の最新状況を反映し、Web制作を学ぶなら必ず押さえておきたい基本のCSS2.1、仕様の策定とブラウザでの実装が進められているCSS3、さらにはその次の規格であるCSS4(Level4モジュール)まで掲載しています。