【簡単】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で背景画像だけ回転させる方法について紹介しました。
以上で解説を終わります。
目次