どうも、チャーさんです。
あなたはcssで背景画像を回転させたい。
そう思っていませんか？
この記事ではcssを使って、
背景画像を回転させる方法を書いています。
なのであなたがこの記事を読めば、
背景画像を好きに回転させることができます。
そのため、cssで背景画像を回転させたい場合、
このまま読み進めてみてください。
スポンサードサーチ
cssで背景画像を回転させる方法
で、まず結論です。
cssで背景画像を回転させたい場合は、
transform:rotateZ()を使えば、
背景画像を回転させることができます。
ということで、早速実際にコードと、
挙動をみていきましょう。
はい！ということで、
こちらの画像が実際にcssで背景画像を、
回転させたものです。
みていただいた通り、
背景画像が回転してますね。
背景画像をより回転させたい場合は
でこちらの背景画像の回転ですが、
rotateZの後ろにある()内のdegの数字を増やすことで、
より大きく回転させることができます。
ちなみにこのdegとは角度のことをさしていて、
90degにすると90度分回転します。
180degにすると、半回転して上と下が、
ひっくり返る感じです。
なので、画像を回転させたい角度を、
()内に入れるようにしましょう。
背景画像の回転の種類
さてこのように、transform:rotateZ()、
を使うと、Z軸に回転させることができます。
で今Z軸という言葉が出ましたが、
transform:rotateでは、
rotateX、rotateY、rotateZ、
種類があります。
聞きなれないと思うので、
説明します。
XYZはそれぞれ軸(ベクトル)のことを表していて、
このXYZを指定することで、
どの軸を中心にして背景画像を回転させるか決めれます。
例えば、transformYと記述をかくと、
Y軸中心に背景画像が回転します。
ちなみにY軸とは縦のことでして、
イメージとしては団子に刺さってる串の感じです。
あの棒を回転させると、団子が棒を中心に、
地球の時点みたいにくるくる回りますよね。
あれと同じ感じで背景画像が回転します。
とはいえ、言葉だけだとイメージは難しいので、
一度指定して試してみると良いでしょう。
スポンサードサーチ
背景画像を回転させると文字も回転してしまった！対処法はこちら
またcssで背景画像を回転させた場合、
背景画像の上に文字を書いていると、
一緒に回転してしまいます。
ですが、文字に対しても、
transform:rotateをかけることができ、
逆回転させれば、文字は元に戻ります。
例としては、
画像の感じですね。
ということでpタグにかけてるcssの記述に、
ご注目ください。
マイナスでdegを書いてますね。
このように背景画像を回転させたのと同じdegを、
マイナス指定で回転させれば、
元に戻ります。
と以上のように、transform:rotateを使えば、
cssで背景画像を回転させることができるので、
ぜひやってみてください。
スポンサードサーチ
まとめ
cssで背景画像を回転させたい場合ですが、
transform:rotateZ()を使いましょう。
XYもありますが、
基本的に使うのはZ軸の回転だと思うので、
背景画像を回転させたいと思ったら使ってみてください。
さて、これであなたは、
cssでの背景画像の回転のやり方が、
わかったと思います。
なので、早速試してみましょう。
そうすることで、あなたのweb制作スキルは、
アップしますよ。
なので、まずはテキストエディターを開き、
transform:rotateZ(数字入れるdeg);
と書きましょう。
それでは、読んでもらってありがとうございました。
チャーさん
