CSS 要素を回転させる方法

CSS 要素を回転させる方法

CSS で要素を回転させる方法を紹介します。
例えば、文字や画像を傾けたり、回転アニメーションを実装したい時に便利な方法です。

  1. CSS で要素を回転させる方法
    1. CSS で要素をX軸回転させる方法
    2. CSS で要素をY軸回転させる方法
    3. CSS で要素をZ軸回転させる方法
  2. 回転アニメーションさせる方法
  3. hover した時に要素を回転させる方法

CSS で要素を回転させる方法

CSS で要素を回転させるには transform プロパティ rotate() を使用します。
要素に rotate() を指定した時の見た目は次のようになります。

ななめ45°

ベースの 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() を指定した場合の見た目はこんな感じです。

X軸で45°
.rotate_x {
transform: rotateX(45deg);
}

rotateX() の動きをわかりやすくアニメーションさせるとこんな感じです。

X軸で45°

CSS で要素をY軸回転させる方法

例えば、CSS で要素をY軸回転させるには transform プロパティ rotateY() を使用します。
rotateY() を指定した場合の見た目はこんな感じです。

Y軸で45°
.rotate_y {
transform: rotateY(45deg);
}

rotateY() の動きをわかりやすくアニメーションさせるとこんな感じです。

Y軸で45°

CSS で要素をZ軸回転させる方法

例えば、CSS で要素をZ軸回転させるには transform プロパティ rotateZ() を使用します。
rotateZ() を指定した場合の見た目はこんな感じです。

Z軸で45°
.rotate_z {
transform: rotateZ(45deg);
}

rotateZ() の動きをわかりやすくアニメーションさせるとこんな感じです。

Z軸で45°

回転アニメーションさせる方法

要素に回転する動きのアニメーション付与したい場合は 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 した時に回転させる場合の指定は次の通りです。

hover した時に要素を回転させる方法
.rotate-hover {
transition: transform 0.3s ease-out;
}
.rotate-hover:hover {
transform: rotate(10deg);
}

まとめ

CSS で要素を回転させる方法を紹介しました。
画像を回転させたい時は CSS で画像を回転させる方法を紹介 をご覧ください。