HTML

CSS で画像を回転させる方法を紹介

CSS で画像を回転させる方法を紹介します。
例えば、画像を表示するときの演出で使用するのにおすすめのテクニックです。

  1. CSS で画像を回転させる方法
    1. CSS で画像をX軸回転させる方法
    2. CSS で画像をY軸回転させる方法
    3. CSS で画像をZ軸回転させる方法
  2. 画像の回転をアニメーションさせる方法
    1. 回転する画像を立体的(3D)にする方法
  3. hover した時に画像を回転させる方法

CSS で画像を回転させる方法

画像を回転させる方法 CSS の transform プロパティ rotate() を使います。
例えば、画像を時計回りに45度回転させるには rotate(45deg) を指定します。

CSS の指定は次のようになります。

img {
transform: rotate(45deg);
}

指定できる数値は 0 から 360 の間でマイナスの指定も可能です、数値の最後には単位 deg を指定します。

CSS で画像をX軸回転させる方法

rotate の回転はX軸、Y軸、Z軸を分けて設定が可能です。
例えば、画像をX軸回転させるには CSS の transform プロパティに rotateX() を指定します。
rotateX() を指定した場合の見た目はこんな感じです。

.img {
transform: rotateX(45deg);
}

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

回転する画像に奥行き感を出して立体的に表現する場合は、後述する 回転する画像を立体的(3D)にする方法 をご覧ください。

CSS で画像をY軸回転させる方法

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

img {
transform: rotateY(45deg);
}

rotateY() の動きをアニメーションで再現するとこんな感じです。

CSS で画像をZ軸回転させる方法

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

.img {
transform: rotateZ(45deg);
}

rotateZ() の動きをアニメーションで再現するとこんな感じです。

画像の回転をアニメーションさせる方法

画像に回転するアニメーション付与したい場合は、CSS の animation プロパティを併用します。
例えば、画像を無限に回転するように見せる場合の指定は次の通りです。

img {
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
動きを無限に繰り返す

回転する画像を立体的(3D)にする方法

X軸、Y軸回転のとき、画像に奥行きがついて立体的に3Dっぽく見せたい場合は、
perspectivetransform-style: preserve-3d; を指定します。

まずは親要素に perspective: 500px; を指定します。これを指定した要素は、数値分の奥行きが付与されたことになります。親要素のサイズに合わせてチューニングが必要です、数値は適宜調整を加えてください。

次に、子要素にあたる画像に transform-style: preserve-3d; を指定します。
この状態で画像を回転させると次のようになります。

.parent {
perspective: 500px;
}
img {
transform-style: preserve-3d;
animation: rotate-anime-3d 3s linear infinite;
}
@keyframes rotate-anime-3d {
0% {transform: rotateX(0);}
100% {transform: rotateX(360deg);}
}

hover した時に画像を回転させる方法

hover した時に画像を回転させるには、CSS の transition プロパティを併用します。
例えば、画像にマウスが hover した時に回転させる場合の指定は次の通りです。

img {
transition: transform 0.3s ease-out;
}
img:hover {
transform: rotate(10deg);
}

まとめ

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

この記事をシェアする