【CSS】マウスオーバーで画像を拡大縮小回転させる

【CSS】マウスオーバーで画像を拡大縮小回転させる

どうも、ジャングルオーシャンのミケです。

今日はマウスオーバーすると画像が拡大、縮小、回転をするエフェクトの紹介だよ。

HTMLCSSだけで簡単に実装できるよ。

ソースコードを載せてるからぜひコピペして使ってね。

こちらのソースコードはPCサイト向けのものになります。ご了承ください。



拡大、縮小、回転に使用するCSSプロパティ

拡大、縮小、回転に使うのは

CSStransformというプロパティだよ。

サンプルデモページも用意したから

具体的なイメージはここでつかみながら色々試してみてね。

サンプルデモを見る

それじゃ拡大、縮小、回転させる時のソースコードを紹介していくよ。

1.マウスオーバーで画像を拡大する

HTML

CSS

サンプルデモを見る

imgタグを囲んでいるdivタグの大きさをwidthとheightで固定してoverflow:hidden;で拡大した分は非表示になるようにしているよ。
マウスオーバー時の動きはimgに:hoverという擬似クラスをつけてその中にプロパティを入れることで指定できるよ。
この時のプロパティがtransformで値のscaleの括弧の中に縦と横の比率をどれくらい大きくするかを記述できるんだ。この場合は、縦も横も1.1倍になっているよ。

2.マウスオーバーで画像を超拡大する

HTML

CSS

サンプルデモを見る

一つ目のマウスオーバー時に拡大するtransformの値は1.1倍だったけどここの値をさっきより大きくするとさらに画像を拡大させることができるよ。

3.マウスオーバーで画像の縦だけを拡大する

HTML

CSS

サンプルデモを見る

transformプロパティの値のscaleの括弧の中に書く数字は、(横,縦)の倍率になるから、この場合は縦だけがすごく拡大されるよ。

4.マウスオーバーで画像の横だけを拡大する

HTML

CSS

サンプルデモを見る

transformプロパティの値のscaleの括弧の中に書く数字は、(横,縦)の倍率になるから、この場合は横だけがすごく拡大されるよ。

5.マウスオーバーで画像を縮小する

HTML

CSS

サンプルデモを見る

拡大した時と同じように、transformプロパティの中のscaleを0.9にしているから画像が縮小されているよ。縮小の時はimgタグを囲んでいるdivタグのoverflow:hidden;は消しているよ。

6.マウスオーバーで画像を超縮小する

HTML

CSS

サンプルデモを見る

transformプロパティのscaleを0.2にしているからすごく縮小されるよ。

7.マウスオーバーで画像の縦だけ縮小する

HTML

CSS

サンプルデモを見る

拡大した時と同じようjにtransformプロパティのscaleが(横,縦)の大きさを変更するようになっているから今回は縦が0.2倍される。つまり縦だけがすごく小さくなるよ。

8.マウスオーバーで画像の横だけ縮小する

HTML

CSS

サンプルデモを見る

transformプロパティのscaleの数字が横を縮小するように設定しているから横だけ縮小されるよ。

9.マウスオーバーで画像をZ軸回転する

HTML

CSS

サンプルデモを見る

画像を回転させる時は同じtransformプロパティでrotateという値を使うよ。今回はZ軸をもとに回転させたいからrotateZを使っているよ。数字のあとについているdegは英語で度を意味するdegreeの省略だよ。

10.マウスオーバーで画像をZ軸回転して逆さにする

HTML

CSS

サンプルデモを見る

さっきZ軸をもとに回転させた時に:hoverの時のtransformプロパティのrotateZの数字を360degにしていたけど、今回はここを180degにしているから180度回転して逆さになるようになっているよ。

11.マウスオーバーで画像をX軸回転する

HTML

CSS

サンプルデモを見る

今度はX軸をもとに回転をさせたいからtransformプロパティの値はrotateXを使うよ。rotateXにすると水平に画像が回転するよ。

12.マウスオーバーで画像をX軸回転して裏にする

HTML

CSS

サンプルデモを見る

:hoverの時のtransformプロパティのrotateXの数字を180にすると画像が水平に回転して裏になるよ。

13.マウスオーバーで画像をY軸回転する

HTML

CSS

サンプルデモを見る

Y軸回転をする時は、transformプロパティの値にrotateYを使うよ。rotateYを使うと画像が垂直に回転するよ。ここでは:hoverの時のrotateYの数字を360degにしているから一回転してもとの位置に戻るよ。

14.マウスオーバーで画像をY軸回転して裏にする

HTML

CSS

サンプルデモを見る

:hoverの時のtransformプロパティのrotateYの数字を180degにしているから垂直に回転して画像が裏になるよ。

まとめ

基本的に画像を変化させたい時は

transformプロパティを使って

値を動きによって変更すればいろんな変化を簡単にさせられるよ。

ぜひ試してみてね。

それじゃまた今度!

TwitterやFacebookのフォローよろしくね!

Twitter
@michelgorilla

Facebook
ミケランジェロ




プログラミングカテゴリの最新記事