【簡単】CSSで背景画像だけ回転させる方法

CSSで背景画像を回転。中のコンテンツは回転させたくない。

本記事ではこのような悩みを解決。

実装例を元に解説します。

実装サンプル

実装サンプルです。

背景画像を30度傾けて回転させてます。

中のテキストは回転されてません。

実装方法は以下の通りです。

/* 背景画像 */
.bg-img {
  background-image: url(背景画像のパス);
  background-size: cover;
  transform: rotate(30deg);/* 回転 */
}

背景画像を回転させるCSSコード例です。

回転にはtransformプロパティを使います。

値にrotate関数を指定。

引数に回転して傾けたい任意の角度を入れます。

以上で背景画像の回転は実装完了です。

/* 中のコンテンツ */
.bg-img p {
  transform: rotate(-30deg);/* 回転戻す */
}

背景画像内のコンテンツは回転させたくない場合、同じくコンテンツにtransform: rotate();を指定。

前章で指定した回転角度の分だけマイナス指定すればOKです。

以上で実装完了です。

CSSで背景画像だけ回転させる方法について紹介しました。

以上で解説を終わります。