Oops! It appears that you have disabled your Javascript. In order for you to see this page as it is meant to appear, we ask that you please re-enable your Javascript!

css 背景画像

cssで背景画像を回転させる方法。1行書けばok

投稿日:

Pocket

うも、チャーさんです。

 

あなたはcssで背景画像を回転させたい。

そう思っていませんか?

 

この記事ではcssを使って、

背景画像を回転させる方法を書いています。

 

 

なのであなたがこの記事を読めば、

背景画像を好きに回転させることができます。

 

そのため、cssで背景画像を回転させたい場合、

このまま読み進めてみてください。

 

 

スポンサードサーチ

cssで背景画像を回転させる方法

 

で、まず結論です。

 

cssで背景画像を回転させたい場合は、

transform:rotateZ()を使えば、

背景画像を回転させることができます。

 

ということで、早速実際にコードと、

挙動をみていきましょう。

 

 

はい!ということで、

こちらの画像が実際にcssで背景画像を、

回転させたものです。

 

css 背景画像 回転

 

みていただいた通り、

背景画像が回転してますね。

 

 

背景画像をより回転させたい場合は

 

でこちらの背景画像の回転ですが、

rotateZの後ろにある()内のdegの数字を増やすことで、

より大きく回転させることができます。

 

ちなみにこのdegとは角度のことをさしていて、

90degにすると90度分回転します。

 

180degにすると、半回転して上と下が、

ひっくり返る感じです。

 

 

なので、画像を回転させたい角度を、

()内に入れるようにしましょう。

 

背景画像の回転の種類

 

さてこのように、transform:rotateZ()、

を使うと、Z軸に回転させることができます。

 

で今Z軸という言葉が出ましたが、

 

transform:rotateでは、

rotateX、rotateY、rotateZ、

種類があります。

 

 

聞きなれないと思うので、

説明します。

 

XYZはそれぞれ軸(ベクトル)のことを表していて、

このXYZを指定することで、

どの軸を中心にして背景画像を回転させるか決めれます。

 

 

例えば、transformYと記述をかくと、

Y軸中心に背景画像が回転します。

 

ちなみにY軸とは縦のことでして、

イメージとしては団子に刺さってる串の感じです。

 

 

あの棒を回転させると、団子が棒を中心に、

地球の時点みたいにくるくる回りますよね。

 

あれと同じ感じで背景画像が回転します。

 

 

とはいえ、言葉だけだとイメージは難しいので、

一度指定して試してみると良いでしょう。

 

 

スポンサードサーチ

背景画像を回転させると文字も回転してしまった!対処法はこちら

 

またcssで背景画像を回転させた場合、

背景画像の上に文字を書いていると、

一緒に回転してしまいます。

 

ですが、文字に対しても、

transform:rotateをかけることができ、

逆回転させれば、文字は元に戻ります。

 

 

例としては、

画像の感じですね。

 

css 背景画像 回転

 

ということでpタグにかけてるcssの記述に、

ご注目ください。

 

マイナスでdegを書いてますね。

 

このように背景画像を回転させたのと同じdegを、

マイナス指定で回転させれば、

元に戻ります。

 

 

と以上のように、transform:rotateを使えば、

cssで背景画像を回転させることができるので、

ぜひやってみてください。

 

 

スポンサードサーチ

まとめ

 

 

cssで背景画像を回転させたい場合ですが、

transform:rotateZ()を使いましょう。

 

XYもありますが、

基本的に使うのはZ軸の回転だと思うので、

背景画像を回転させたいと思ったら使ってみてください。

 

 

さて、これであなたは、

cssでの背景画像の回転のやり方が、

わかったと思います。

 

なので、早速試してみましょう。

 

そうすることで、あなたのweb制作スキルは、

アップしますよ。

 

 

なので、まずはテキストエディターを開き、

transform:rotateZ(数字入れるdeg);

と書きましょう。

 

それでは、読んでもらってありがとうございました。

 

 

チャーさん

 

-css, 背景画像


スポンサードサーチ

関連記事

no image

cssの書き方カンマについての疑問はこの記事で解消

どうも、チャーさんです。   この記事ではcssの書き方の1つである カンマについて書いてます。   なのでこの記事を読めば、あなたは cssのカンマについての疑問が解消され、 さ …

no image

cssの読み込み方法を3つ紹介「どれも簡単です」

どうも、チャーさん(@chaa___san)です。   あなたはcssの読み込み方法がわからず、 困っていますか?   この記事ではcssの読み込み方法を3つ紹介してます。 なので …

ワードプレスで文字の周りを線で囲う方法(コピペで一発でできます)

  どうもchamです。   あなたはワードプレスで記事を書いていて 囲いをつけたいと思ったことはありませんか?   ここに文字を入れる   こんな風に囲いをつ …

no image

レスポンシブ対応の画像にする方法。1行コードを書くだけでOK

  どうも、チャーさんです。   あなたは画像をレスポンシブ対応にしたい、 そう思っていませんか?   ブレイクポイント毎に、画像の幅を指定するのは、 もう疲れた、何か一 …

no image

cssで文章を省略する方法。コピペでok

どうもチャーさんです。   あなたはcssで文章を省略したいと、 思っていませんか?   この記事では、cssを使い、 文章を省略する方法を書いています。   &nbsp …

no image

cssの書き方これらのセレクタを知ってればほぼ困りません

どうも、チャーさんです。   あなたはcssの書き方でセレクタに ついて色々な書きかたがあってよくわかってない、 と感じていませんか?   この記事では様々なセレクタの指定方法を …

no image

cssの書き方でフォントサイズについて知りたいならこの記事

どうも、チャーさんです。   この記事では、cssでフォントサイズ (文字の大きさ)を変える方法を書いてます。     なので、この記事を読めば、 あなたはフォントサイズ …

no image

cssでボタンをレスポンシブ対応にする方法(微調整必要なしで楽ですよ)

どうも、チャーさんです。   あなたはcssでボタンをレスポンシブにしたい、 かつブレークポイントごとに微調整する手間ひまの、 必要のないボタンを作る方法はないかと思ってませんか? &nbs …

no image

absoluteとrelativeの違いがこれを読めば1目でわかりますよ。

  どうも、チャーさんです。   あなたはabsoluteとrelativeの違いがわからず、 困っていませんか?   またそのせいで、思ったように ページ制作に活用でき …

no image

cssで平行四辺形を作る方法「1行足せばできますよ」

どうも、チャーさんです。   あなたは、cssで平行四辺形に できないものかと思っていませんか?   この記事では、要素をcssで平行四辺形に する方法を書いています。 &nbsp …

no image

レスポンシブデザインを3秒で確認できる方法「各サイズ」

どうも、チャーさんです。   あなたは、レスポンシブデザインの確認方法を、 探していませんか?   この記事では、レスポンシブデザインを、 スマホサイズ、タブレットサイズ、pcサイ …

no image

cssで背景画像を表示するコードと方法「コピペOK」

どうもチャーさん(@chaa___san)です。     あなたはcssで背景画像を表示したいですか?   この記事ではcssで背景画像を表示する方法、 コード、あなた自 …

no image

cssで要素の位置調整をする方法を丁寧に解説コピペもok

どうも、チャーさん(@chaa___san)です。   あなたはcssで画像やdivで作った要素の位置調整を、 したいと思っていませんか?   この記事ではcssでそれらの要素の位 …

no image

cssスマホサイズ時のレイアウトはこれが良いですよ

どうも、チャーさんです。   あなたはcssを書いていて、 スマホサイズの時のレイアウトを、 どうしたらいいか悩んでいませんか?   この記事では、スマホサイズ時の 良いレイアウト …

no image

flexcssを使って横並びにする方法(ページ制作に超便利です)

どうも、チャーさんです。   あなたはflexというcssのプロパティを使い、 要素を横並びにする方法を知りたい。 そう思っていませんか?   この記事ではcssのflexを使い、 …

最新記事

チャーさん

プログラミング・筋トレ・unity系の記事などを書いてます。

大学卒業後→開業→個人事業主7年目ぐらいです。webサイト制作したり、unityでゲーム開発しております。

youtubeもやってまして、主にプログラミング動画とかunity系の動画をあげてるので見てください。