【初心者向け】CSSで背景画像だけを回転させる方法を紹介！他の応用技も

WEB制作で、

背景画像を回転させたい。
でも背景画像以外の要素は回転させたくない。

って時に使えるテクニックを紹介します。

CSSで背景画像だけを回転させる方法
- 「transform: rotate」で全体を回転
- 中の要素だけ元に戻す
まとめ：CSSで背景画像だけを回転

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

CSSを使って背景画像だけを回転させる方法を紹介。

サンプル

CSSで背景画像だけを回転させたい

HTML

<div id="rotate-sample01">
  <p>CSSで背景画像だけを回転させたい</p>
</div>

CSS

#rotate-sample {
  width: 100%;
  height: 230px;
  background-image: url(bg_sample.jpg);
  background-repeat: no-repeat;
  background-position: right center;
}
#rotate-sample p {
  font-size: 28px;
  font-weight: bold;
  line-height: 230px;
  text-align: left;
}

サンプルとして、CSSで背景画像を設定したdiv：rotate-sampleの中に<p>タグでテキストが入っています。

この黄色の背景画像だけを左右に反転して使いたいと思います。

「transform: rotate」で全体を回転

まずは、CSSで要素を回転させます。

CSSでの回転には「transform: rotate」を使用！

transform: rotateの後に(回転角度)で記述します。

transform:rotate(45deg);    /* センターを基準に時計回りに45度回転 */
transform:rotate(-90deg);    /* センターを基準に反時計回りに90度回転 */

X（水平）、Y（垂直）の基準軸の指定も可能！

transform:rotateX(180deg);  /* 上下に180度回転（反転） */
transform:rotateY(180deg);  /* 左右に180度回転（反転） */

今回のサンプルのケースだと、Y軸を基準に左右に反転させたいので、

CSS

#rotate-sample {
  width: 100%;
  height: 230px;
  background-image: url(bg_sample.jpg);
  background-repeat: no-repeat;
  background-position: right center;
  transform:rotateY(180deg);  /* 追記：Y軸を基準に反転する */
}
#rotate-sample p {
  font-size: 28px;
  font-weight: bold;
  line-height: 230px;
  text-align: left;
}

#rotate-sampleに１行追加しました。

CSSで背景画像だけを回転させたい

左右に反転しましたが、このままだと中のテキストも反転しちゃいますので、テキストだけ元に戻してあげます。

中の要素だけ元に戻す

テキストだけ元に戻すには、中の<p>タグに元に戻すCSSを追加。

CSS

#rotate-sample {
  width: 100%;
  height: 230px;
  background-image: url(bg_sample.jpg);
  background-repeat: no-repeat;
  background-position: right center;
  transform:rotateY(180deg);  /* 追記：Y軸を基準に反転する */
}
#rotate-sample p {
  font-size: 28px;
  font-weight: bold;
  line-height: 230px;
  text-align: left;
  transform:rotateY(-180deg);  /* 追記：元に戻すために反転 */
}

完成！

CSSで背景画像だけを回転させたい

CSSで背景画像だけを回転（反転）させることができました！

全体を回転させ→中の要素だけ元に戻す。という流れになります。