「transform: scale;」を使って、画像や図形を拡大表示させる方法を紹介します。
自分の学習・メモ用がメインですが、プログラミング学習初心者の参考になればとも思います！
なお、ホバー時のアニメーションについては以下記事でも紹介していますので、合わせてご覧ください。
ホバー時に文字を拡大表示（枠から溢れた部分は表示カット）する場合
HELLO WORLD
ホバーやクリックで画像が拡大する実装3例
マウスホバーで画像拡大
下のブロックにマウスをのせると、ブロックが2倍に拡大します。
マウスを離すと元に戻ります。
クリックで画像拡大
下のブロックをクリック（タップ）すると、ブロックが2倍に拡大します。
もう一度クリック（タップ）すると元に戻ります。
画像をフワッと拡大
下のブロックをクリック（タップ）すると、ブロックがフワっと2倍に拡大します。
もう一度クリック（タップ）するとフワっと元に戻ります。
HTML / CSS / JavaScript コード
CSSのプロパティであるtransformを使うことで、画像や図形を移動させたり変形させたりできます。
「transform: scale(x, y);」と記述し、
- 「x」にはx軸(横)方向に何倍大きくさせるか
- 「y」にはy軸(縦)方向に何倍大きくさせるか
を指定します。
また、「transform-origin」プロパティを使うと、要素のどの位置を基準にして拡大（縮小）するかを指定できます。
（変形後ではなく、変形前の元要素に記述する点に注意。）
- 「transform: scale(0.5, 2);」であれば、x軸方向に0.5倍、y軸方向に2倍の大きさとなります。
- 「transform-origin: top left;」であれば、要素の左上を基準にして拡大（縮小）します。
- 実装例はすべて、この指定にしてあります。
- デフォルトでは中央起点「transform-origin: center;」となっています。
マウスホバーで画像拡大
図形の上にマウスをホバーする（マウスを重ねる）だけで拡大します。（マウスを離すと元に戻る）
これはJavaScript不要で、HTMLとCSSだけで実装できます。
実装例ではCSSで装飾した図形を使っていますが、画像にも対応できます。
HTML/CSS コードはこちら
<div class="box_1"></div>.box_1 {
width: 100px;
height: 100px;
background-color: tomato;
transform-origin: top left;
}
.box_1:hover {
transform: scale(3, 3);
}- transform: scale(x, y);」で、対象範囲の拡大や縮小ができる。
xには横方向の拡大倍率、yには縦方向の拡大倍率を指定する。
この例では横に3倍、縦に3倍大きくするという意味になる。 - 「transform-origin」で、拡大の起点を指定できる。
この例（top left）では左上を起点に拡大するという意味になり、指定がないと中央が起点になる。
クリックで画像拡大
図形の上でクリック（またはタップ）すると拡大します。（もう一度クリック（タップ）をすると元に戻る）
実装例ではCSSで装飾した図形を使っていますが、画像にも対応できます。
HTML/CSS/JavaScript コードはこちら
<div class="box_2"></div>.box_2 {
width: 100px;
height: 100px;
background-color: skyblue;
transform-origin: top left;
}
.box_2:hover {
cursor: zoom-in;
}
.box_2.scale {
transform: scale(3, 3);
}
.box_2.scale:hover {
cursor: zoom-out;
}- 「transform: scale(x, y);」で、対象範囲の拡大や縮小ができる。
xには横方向の拡大倍率、yには縦方向の拡大倍率を指定する。
この例では横に3倍、縦に3倍大きくするという意味になる。 - 「transform-origin」で、拡大の起点を指定できる。
この例（top left）では左上を起点に拡大するという意味になり、指定がないと中央が起点になる。 - 「cursor: zoon-in;」と「cursor: zoon-out;」で、カーソルが虫眼鏡に変わる。
const box2 = document.querySelector('.box_2');
box2.addEventListener('click', () => {
box2.classList.toggle('scale');
});- クリックで “scale” クラスの付け外しができるJavaScript。
画像をフワっと拡大
図形の上でクリック（またはタップ）すると、フワっと少し時間をかけて拡大します。
（もう一度クリック（タップ）をすると、同じように時間をかけて元に戻る）
実装例ではCSSで装飾した図形を使っていますが、画像にも対応できます。
HTML/CSS/JavaScript コードはこちら
<div class="box_3"></div>.box_3 {
width: 100px;
height: 100px;
background-color: limegreen;
transform-origin: top left;
transition: transform .3s;
}
.box_3:hover {
cursor: zoom-in;
}
.box_3.scale {
transform: scale(3, 3);
}
.box_3.scale:hover {
cursor: zoom-out;
}- 「transform: scale(x, y);」で、対象範囲の拡大や縮小ができる。
xには横方向の拡大倍率、yには縦方向の拡大倍率を指定する。
この例では横に3倍、縦に3倍大きくするという意味になる。 - 「transform-origin」で、拡大の起点を指定できる。
この例（top left）では左上を起点に拡大するという意味になり、指定がないと中央が起点になる。 - 「cursor: zoon-in;」と「cursor: zoon-out;」で、カーソルが虫眼鏡に変わる。
- 「transition: transform .3s;」で、transformというプロパティを0.3秒かけて変化させられる。
const box3 = document.querySelector('.box_3');
box3.addEventListener('click', () => {
box3.classList.toggle('scale');
});- クリックで “scale” クラスの付け外しができるJavaScript。