CSS 画像を回転させる方法
最終更新日 - 公開日 2019.06.19
by
CSS で画像を回転させる方法を紹介します。
例えば、画像を表示するときの演出で使用するのにおすすめのテクニックです。
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);}
}
秒針のように間隔を空けて動かす場合は steps を使用します。
img {
animation: rotate-anime 60s steps(60) 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っぽく見せたい場合は、
perspective と transform-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 で画像を回転させる方法を紹介しました。
