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

CSSだけで台形を作る方法

更新日:2022.09.21
232
HTMLCSS プログラミング

html・CSSでテキスト文章を縦書きにする方法

2021.12.22
148
HTMLCSS プログラミング

【CSS】select(セレクト)要素の矢印を消して画像にする方法

2022.01.09
1136
HTMLCSS

【CSS】flexboxで最後の要素は右寄せ・最初の要素は左寄せにする方法

2022.07.14
482