CSSで背景画像を回転させる方法！背景画像だけ回転

CSSで背景画像を回転させたり、回転させてアニメーションさせたいということがあります。

今回は背景画像を回転させる方法をサンプルコード付きで解説していきます。

サンプルの背景画像として以下の画像を用います。

では以降の項目でCSSで背景画像を回転させたり、アニメーションさせる方法について見ていきましょう。

まずCSSで背景画像を回転させる一般的な方法について解説します。

CSSで背景画像を回転させるには transform: rotateZ()を用います。では実際にサンプルコードを用いて挙動を見てみましょう。

このようにtransformプロパティによって背景画像が回転していることが分かります。

ではサンプルコードの解説を行います。

回転させたい画像に対してtransform: rotateZ()を用います。rotateZの引数には回転角度を設定します。

今回は30度回転させたいので、30degと設定しています。すると30度背景画像が傾きます。

背景画像を反転させてアニメーションさせる方法について解説します。

ではまずサンプルコードを用いて、挙動を見てみましょう。

このように背景画像が回転していることが分かります。

ではサンプルコードの解説を行います。

まず回転させてアニメーションさせたい要素にanimation-nameで適当な名前を設定します。

そして@keyframesで0%のときはtransform: rotateZ(0);、100%のときはtransform: rotateZ(360deg);と設定し100%の時に360度回転させるようにします。

またanimation-durationでアニメーションにかかる秒数、animation-timing-functionでどのような回転をするアニメーションにするか、animation-iteration-countで何回アニメーションさせるかを好みに合わせて適当な値を設定します。

これで背景画像を回転させてアニメーションさせることができます。

背景画像のみ回転させて、その上にある文字などは回転させたくないという事があります。

もし背景画像を回転させるとその上にある文字なども一緒に回転してしまいます。

ではどうしたらいいのか、サンプルコードを用いて挙動を確認してから解説します。

このように背景画像のみ回転していて、その上にある文字は回転していないことが分かります。

ではサンプルコードの解説を行います。

背景画像を回転させたときにその上にある文字まで一緒に同じ角度回転してしまうなら、文字は別で回転してしまった分をマイナスして元に戻せばいいのです。

今回の場合、背景画像を30deg回転させたので、文字は-30deg回転させて文字のみ元に戻しています。

文字を反転させる場合、一般的な方法だと拡大縮小表示を制御できるtransform: scale()を用います。

transform: scale(水平軸,垂直軸);といった使い方で、反転させたい場合は変数に-1を設定します。

今回は左右反転(水平軸=-1)をサンプルコードを用いて実行します。

このように今までの背景画像と比べると、左右反転されていることが分かります。

ではサンプルコードの解説を行います。

今回は左右対称なので、transform: scale(-1,1);とし、水平軸に対してのみ反転させ、垂直軸に関しては何も変化させないようにしています。

もし上下反転させたい場合は、transform: scale(1,-1);、上下左右反転させたい場合は、transform: scale(-1,-1);となります。

いかがでしたでしょうか？

今回、背景画像を回転させる方法のみならず、反転させる方法に関してもお伝えしました。

ここで伝えた方法を用いて、背景画像を自由自在に操作してみてください。