CSS 要素を回転させる方法
最終更新日 - 公開日 2017.07.19
by
CSS で要素を回転させる方法を紹介します。
例えば、文字や画像を傾けたり、回転アニメーションを実装したい時に便利な方法です。
CSS で要素を回転させる方法
CSS で要素を回転させるには transform プロパティ rotate() を使用します。
要素に rotate() を指定した時の見た目は次のようになります。
ベースの HTML は次の通りです。
<div class="rotate">ななめ45°</div>
CSS の指定は次の通りです。
.rotate {
transform: rotate(45deg);
}
指定できる数値は 0 から 360 の間。数値の単位は deg を指定します。
数値は -45deg のようにマイナスの指定も可能です。
CSS で要素をX軸回転させる方法
rotate の回転はX軸、Y軸、Z軸を分けて設定が可能です。
例えば、要素をX軸回転させるには transform プロパティ rotateX() を使用します。
rotateX() を指定した場合の見た目はこんな感じです。
.rotate_x {
transform: rotateX(45deg);
}
rotateX() の動きをわかりやすくアニメーションさせるとこんな感じです。
CSS で要素をY軸回転させる方法
例えば、CSS で要素をY軸回転させるには transform プロパティ rotateY() を使用します。
rotateY() を指定した場合の見た目はこんな感じです。
.rotate_y {
transform: rotateY(45deg);
}
rotateY() の動きをわかりやすくアニメーションさせるとこんな感じです。
CSS で要素をZ軸回転させる方法
例えば、CSS で要素をZ軸回転させるには transform プロパティ rotateZ() を使用します。
rotateZ() を指定した場合の見た目はこんな感じです。
.rotate_z {
transform: rotateZ(45deg);
}
rotateZ() の動きをわかりやすくアニメーションさせるとこんな感じです。
回転アニメーションさせる方法
要素に回転する動きのアニメーション付与したい場合は animation プロパティを使用します。
例えば、要素を無限に回転するように見せる場合の指定は次の通りです。
.rotate-anime {
animation: rotate-anime 3s linear infinite;
}
@keyframes rotate-anime {
0% {transform: rotate(0);}
100% {transform: rotate(360deg);}
}
アニメーションのタイミング（animation-timing-function）は次の値で変更できます。
- ease
- 開始と終了を滑らかに（初期値）
- linear
- 一定間隔の動き
- ease-in
- ゆっくり始まる
- ease-out
- ゆっくり終わる
- ease-in-out
- ゆっくり始まってゆっくり終わる
アニメーションの繰り返し（animation-iteration-count）を次の値で指定できます。
- 数値
- 数値を指定、未設定の場合の初期値は1
- infinite
- 動きを無限に繰り返す
hover した時に要素を回転させる方法
hover した時に要素を回転させる方法させる場合は transition プロパティを使用します。
例えば、要素にマウスが hover した時に回転させる場合の指定は次の通りです。
.rotate-hover {
transition: transform 0.3s ease-out;
}
.rotate-hover:hover {
transform: rotate(10deg);
}
まとめ
CSS で要素を回転させる方法を紹介しました。
画像を回転させたい時は CSS で画像を回転させる方法を紹介 をご覧ください。
