WEB

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

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

WEB制作で、

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

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

関連レスポンシブサイトでjavascriptを分岐させる方法
関連電話番号への自動リンクを無効にする方法

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-sample1行追加しました。

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で背景画像だけを回転(反転)させることができました!

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

まとめ:CSSで背景画像だけを回転

CSSの回転にはtransform: rotate(回転角度);を使用する。

中の要素も回転してしまったら、その分は(-回転角度)元に戻せばOK!

  • WEBやプログラミングの知識をつけたい
  • でも、スクールの学費は高すぎる

という方には、安価で始められる侍テラコヤ」がオススメ!

Check!
「侍テラコヤ」は安くで始めるプログラミングスクール【リスキリングにおすすめ】評判や特徴をレビュー
「侍テラコヤ」は安くで始めるプログラミングスクール【リスキリングにおすすめ】評判や特徴をレビュー

続きを見る

¥2,838 (2024/02/26 12:58時点 | Amazon調べ)
【簡単レスポンシブ】PCとスマホで画像を切り替える方法【HTMLのみ】

WEB

2024/1/3

【簡単レスポンシブ】PCとスマホで画像を切り替える方法...

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

WEB

2023/12/23

【初心者向け】CSSで背景画像だけを回転させる方法を紹...

リコー「THETA SC2」で撮影した写真・動画をウェブ上で公開する方法 【360度カメラ】

WEB カメラ

2023/10/12

リコー「THETA SC2」で撮影した写真・動画をウェ...

「侍テラコヤ」は安くで始めるプログラミングスクール【リスキリングにおすすめ】評判や特徴をレビュー

WEB デザイン

2023/5/13

「侍テラコヤ」は安くで始めるプログラミングスクール【リ...

【箇条書き】リストタグ[ ul・ol・li ]の使い方、マーカーの消し方・注意点も

WEB 作りたい

2023/12/23

【箇条書き】リストタグ[ ul・ol・li ]の使い方...

-WEB
-, ,