HTML

コピペで簡単 CSS で要素を回転させる方法

コピペで簡単 CSS で要素を回転させる方法

CSS で要素を回転させる方法を紹介します。
例えば、テキストや画像を斜めにしたり回転させてたい時に便利な方法です。

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

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

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軸回転させるには CSS の transform プロパティに rotateX() を指定します。
rotateX() を指定した場合の見た目はこんな感じです。

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

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

X軸で45°

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

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

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

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

Y軸で45°

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

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

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

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

Z軸で45°

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

要素に回転する動きのアニメーション付与したい場合は、CSS の 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 した時に要素を回転させる方法させる場合は、CSS の transition プロパティを使用します。
例えば、要素にマウスが hover した時に回転させる場合の指定は次の通りです。

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

まとめ

CSS で要素を回転させる方法を紹介しました。

この記事をシェアする