当サイトはアフィリエイト広告を利用しています。

【画像を使いこなす⑨】cssで画像を回転させる指定のやり方|背景画像も

【html/css|画像を使いこなす⑨】画像を回転させる

↑今回はこれをやります。

だけど、画像を傾けるってむずかしそう…

と思うかもしれませんが、カンタンです。

<img>にtransformを指定するだけなので。

ちなみに背景画像も回転できます。

というわけで、さっそくご覧ください。

画像を回転させるtransformの指定方法

transformプロパティには、4つの値があります。

※transform = 変形

htmlのタグと要素
cssのセレクタ・プロパティ・値

transformの値

そして、画像を傾けるにはrotateを使います。

実際の動きとしては回転です。

ただ、傾きと言う方がしっくり来る場合もあるので、「回転・傾き」両方使います。

transformの指定方法はこちら。

img {
  transform: rotate(数値deg);
}

※deg = 角度

これだけ。

数値はプラスだと時計回り⤵︎

マイナスだと反時計回り⤴︎に回転します。

ちなみに画像だけでなく、どんな要素も傾けられます。

img画像の回転

それでは、img画像を回転させてみます。

<img src="kohji.png" alt="工事">
img {
  transform: rotate(10deg);
}

rotate(10deg)

画像が10度時計回りに回転

もうできました。

傾いていますね。

逆回転

次は、マイナス値を指定。

img {
  transform: rotate(-20deg);
}

rotate(-20deg)

画像が-20度反時計回りに回転

反時計回り。

これだと、回転と呼んでもよさそうですね。

傾きを真っ直ぐに戻す場合

回転させた画像を真っ直ぐに戻したい。

例えばパソコン用では傾け、スマホ用では真っ直ぐにしたい時は、以下のようにしましょう。

img {
  transform: rotate(10deg);
}
@media(max-width:480px){
  img {
    transform: rotate(0deg);
  }
}
/* 画面幅480pxまでは画像の傾きなし */

または、<img>にtranform: none(初期値)でも真っ直ぐになります。

※初期値 … 指定しない時、はじめから与えられている値。
【参考記事】初期値の使い所を理解する

今度は、背景画像を傾けてみましょう。

【参考記事】
【css】指定の型を身につけるの「@mediaの書き方」
(クリックすると該当箇所にジャンプします)

背景画像の回転

背景画像を傾けるには、画像を指定した要素transformを指定します。

ちなみに画像は、幅: 400px 高さ: 350pxです。

<p>
 
</p>
p {
  width: 400px;
  height: 350px;
  background-image: url(solar.png); /* 画像の大きさ 幅:400px  高さ:350px */
  transform: rotate(-5deg);
}
/* 画像全体が表示されるようにpの幅と高さを指定 */

※横にスクロールしてください。

rotate(-5deg)

背景画像が-5度反時計回りに回転

<p>要素の背景画像が斜めになりました。

これもカンタンです。

背景画像に文字をのせる場合

<p>
  太陽光
</p>
p {
  width: 400px;
  height: 350px;
  background-image: url(solar.png); /* 画像の大きさ 幅:400px  高さ:350px */
  transform: rotate(10deg);
}
/* 画像全体が表示されるようにpの幅と高さを指定 */

※横にスクロールしてください。

先ほどの<p>に文字を入れると、文字も傾きます↓

rotate(10deg)

背景画像と一緒に文字も回転

文字だけを真っ直ぐに

文字だけ真っ直ぐするには、以下のよう親子関係を作ります。

  • 親:<div>
  • 子:<p>
<div>
  <p>
    太陽光
  </p>
</div>
div {
  width: 400px;
  height: 350px;
  background-image: url(solar.png); /* 画像の大きさ 幅:400px  高さ:350px */
  transform: rotate(10deg);
}
p {
  transform: rotate(-10deg);
}
/* 画像全体が表示されるようにdivの幅と高さを指定 */

※横にスクロールしてください。

<div>にrotate(10deg) <p>にrotate(-10deg)

背景画像は傾き、文字だけ真っ直ぐ

手順

  1. <div>で<p>を囲む
  2. <div>に背景画像を指定し、傾けるrotate(10deg)
    ※この時点では子である<p>の文字も斜めになる。
  3. <p>へ逆に傾ける指定rotate(-10deg)をする

こんなカラクリで、文字だけ真っ直ぐにできます。

マウスを乗せた時に画像を回転

画像にカーソルを乗せた時、斜めにするには…

img:hoverとして、transformを指定すればオッケー。

<img src="kohji.png" alt="工事">
img:hover {
  transform: rotate(10deg);
}

rotate(10deg)

振り子のような動き

※マウスを乗せるか、スマホの方はタップしてください。

カーソルが乗ると画像が傾き、離すと元に戻ります。

動きが出ると、なんだか楽しいかも…

【補足】基準点のtransform-originついて

基準点とは、傾く時の支点のことを言います。

と、説明したもののたぶん伝えられてない…

見た方が早そうなので、こちらをどうぞ。

回転の基準点(50% 50%)
transform-origin: 50% 50%(初期値)
回転の基準点(left top)
transfer-origin: left top

基準点の指定は、transform-originでします。

※origin = 基点

そして、これまで見てきた基準点は真ん中(50% 50%)でした。

transform-originの初期値は50% 50%だからです。

transform-origin: left topとすれば、左上の角が基準点に。

【参考外部サイト】transform-origin|MDN

使いどころはhover時がいいかもしれません。

動きとしては、振り子みたいな感じになるかと。

※基準点の指定は、hover時ではなくカーソルを合わせる前の<img>にします。

<img src="kohji.png" alt="工事">
img {
  transform-origin: left top;
  transition: 1s; /* 回転が終わるまでにかかる時間 */
}
img:hover {
  transform: rotate(10deg);
}

※横にスクロールしてください。

transform-origin: left top

振り子のような動き

※マウスを乗せるか、スマホの方はタップしてください。

個人的には、わりと好きな動きです。

もう1つだけ、右下を基準点にした動きをどうぞ。

transform: right bottom

振り子のような動き

※再び、マウスを乗せるか、スマホの方はタップしてください。

だいぶ動きが変わりますね。

どんな動きにするかは、基準点を変えならが探してみてください。

あっ、それとtransition: 1sとしています。

ですので、1秒かけて傾き・1秒かけて戻ります。

ちょいゆったり目な動きの方が、それっぽい感じですね。

transitionについては、こちらをどうぞ。
【参考記事】時間をかけて変化させる|transition

【おまけ】画像をぐるんと回転

一応、こんなのもできます。

※マウスを乗せるか、スマホの方はタップしてください。

img {
  transition: 0.5s;
}
img:hover {
  transform: rotateX(180deg);
}
振り子のような動き
img {
  transition: 1s;
}
img:hover {
  transform: rotateY(180deg);
}
振り子のような動き

画像が反転してますね。

おまけなので、解説はなしです。
(と言いつつ、説明がめんどくさいだけ…)

参考サイト

この記事はCSS3をもとに書きました。

CSS3とはcssのルールブックみたいなもので、その最新版です。

いずれも翻訳ありです。

お時間ある時にチラッとどうぞ〜

まとめ

今回は、画像を回転させる方法について解説しました。

ポイントは以下です。

  • 画像を回転させるには、imgにtransform: rotateと指定する。
  • 背景画像を傾ける場合は、背景画像を持つ要素に指定。
  • マウスオンで傾かせるには、img:hoverする。
  • 基準点を変える時は、transform-originを使う。

すぐにできそうな気がしましたよね?

というわけで、さっそくやってみましょう。

動きのデザインがある指定方法がほかにも

この記事で紹介したマウスを乗せた時の動きは、ほかにもあります。

以下の記事では、画像がズームするやり方を紹介してるのでご覧ください。

コーディングするのが、少し楽しくなるかもしれません。

タイトルとURLをコピーしました