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のレスポンシブの書き方を、 知りたいと思っていませんか?   この記事では、cssのレスポンシブの書き方、 メディアクエリ、コードの具体 …

no image

デベロッパーツールの使い方を紹介します。「コーダーは知るの推奨です」

どうも、チャーさんです。   あなたはデベロッパーツールって、 どう使ったらいいのか?と思っていませんか。   そもそもどんな使い道があるん? と疑問に思っていませんか。 &nbs …

no image

cssで三角形を作る方法、コピペで一発でできますよ。

どうも、チャーさんです。   あなたはcssで三角を作る方法を、 探していますか?   この記事ではcssで三角を作る方法を、 書いています。     そしてこ …

no image

cssを動画で学習したいならこの記事をどうぞ

どうも、チャーさんです。 あなたは、cssを始めたい、 で、わかりやすく動画で学習したい、   そう思っていませんか?   この記事では、cssを動画で学習できるよう、 僕がとった …

no image

htmlのリンクの下線を消す方法「1行書けば消せますよ」

どうも、チャーさんです。   あなたはhtmlのリンクの下線を消す方法を、 探していませんか?   この記事では、リンクの下線を消す方法を 書いています。   &nbsp …

no image

cssの効率的な学習方法を知りたいなら読んでください。

  どうも、チャーさんです。   あなたはcssの学習方法を模索していますか? どうしたらもっと効率よく早く学習し上達できるのか、 その方法を探していますか?   この記 …

no image

cssのborderを初学者でもわかりやすいよう説明します

どうも、チャーさん(@chaa___san)です。   あなたはcssのborderとは何か? と疑問に思っていませんか?   この記事ではcssのborderについて、 初学者で …

no image

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

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

no image

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

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

no image

liタグを横並びにする方法。この方法なら15秒でできますよ。

どうも、チャーさんです。   あなたがliタグを横並びにしたい、 そう思っていませんか?     この記事では、liタグを横並びにする方法を、 書いています。 &nbsp …

no image

cssでドロップダウンメニューを作る方法

どうも、チャーさんです。   あなたはcssでドロップダウンメニューを 作りたいと思っていませんか?   この記事ではjavascriptなどを使わずに htmlとcssのみでドロ …

no image

レスポンシブでフォントサイズを可変にする方法「手間いらず」

どうもチャーさんです。   あなたはレスポンシブで、 フォントサイズを可変にする方法を 探していますか?   この記事では、フォントサイズをレスポンシブで 自動調整できる方法を書い …

no image

cssの書き方をまとめました「よく使う内容を網羅」

どうも、チャーさんです。 あなたはcssの書き方について、 網羅的に知りたいですか?   この記事ではcssの書き方について、 よく使われるものについてまとめてみました。   なの …

no image

cssで見出しに画像を表示させる方法「簡単にできる」

どうも、チャーさんです。 あなたはcssで見出しに画像を表示させたい。 そう思っていませんか?   この記事では、cssで見出しに画像を 表示させる方法を書いてます。   なのであ …

no image

ブートストラップの使い方を初心者向けに紹介

どうも、チャーさんです。   あなたはブートストラップを使ってみたい、 または使わないといけないけど、 使い方がわからない。   導入の仕方も、何したらいいかもわからない。 そんな …

最新記事

チャーさん

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

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

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