HTML

コピペで簡単 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軸を分けて設定することもできます。
例えば、CSS で要素をX軸回転させるには CSS の transform プロパティで rotateX() を指定します。
rotateX() を指定した場合の見た目はこんな感じです。

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

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

X軸で45°

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

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

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

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

Y軸で45°

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

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

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

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

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 で要素を回転させる方法を紹介しました。

この記事をシェアする

合わせて読みたい関連記事