Written by Kasumi

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

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

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

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

実装サンプル

See the Pen
CSSで背景画像だけ回転させる方法
by Kohei (@kouk05)
on CodePen.0

実装サンプルです。

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

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

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

背景画像を回転させるCSS

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

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

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

値にrotate関数を指定。

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

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

背景画像内のコンテンツは回転させたくない場合

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

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

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

以上で実装完了です。

まとめ

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

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

目次

関連記事

HTMLCSS プログラミング

横スライドメニューをhtml・CSSのみで実装【JS不要簡単】

2020.04.12
2257
HTMLCSS

【CSS】formタグ内のデフォルトCSSをリセットする方法

更新日:2019.11.28
843
HTMLCSS プログラミング

HTML・CSSのみで開閉アコーディオンを作る【JS不要簡単】

2020.04.12
4054
HTMLCSS

position: sticky;で要素が追従しない時の原因・対処方法

2022.10.06
1695