【transform:scale】タグ要素を2次元(x,y)または3次元(x,y,z)に拡大・縮小表示する方法

【transform:scale】タグ要素を2次元(x,y)または3次元(x,y,z)に拡大・縮小表示する方法

cssのtransform:scaleを使用し、タグ要素を2次元(x,y)または3次元(x,y,z)に拡大・縮小表示します。
過去に
jQueryの.cssとzoomでページ全体を拡大・縮小表示してみる
を紹介しましたが、ブラウザの種類によってはcssのzoomは効かない(FireFox等)ものもありましたので、
今回はtransform:scaleを使ってタグ要素を拡大・縮小させてみます。

class=demo1~5のimgタグ要素を2次元(x,y)または3次元(x,y,z)に拡大・縮小したCSSを記述

※必要に応じて書き換えてください。

<style type="text/css">
body{
  font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
  padding: 0;
  margin: 0;
  font-size: 24px;
  text-align: center;
}
h1{
  line-height:1.6em;
  text-align:center;
  font-weight:normal;
  padding:10px 0 0 0;
  font-size: 24px;
}
div{
  padding: 40px 0;
  border-top: dotted 1px #cccccc;
}
.demo1 img {
  transform: scale(0.6,0.6);
}
.demo2 img {
  transform: scaleX(0.6);
}
.demo3 img {
  transform: scaleY(0.6);
}
.demo4 img {
  transform: scaleZ(0.6);
}
.demo5 img {
  transform: scale3d(0.6,0.6,0.6);
}
</style>

HTMLの記述

※今回300px×300pxの画像を用意しました。

<h1>imgタグ(300px×300pxの画像)要素を2次元(x,y)、3次元(x,y,z)に拡大または縮小表示</h1>


<div class="demo1">
scale(0.6,0.6)<br>
<img src="simg.jpg">
</div>

<div class="demo2">
scaleX(0.6)<br>
<img src="simg.jpg">
</div>

<div class="demo3">
scaleY(0.6)<br>
<img src="simg.jpg">
</div>

<div class="demo4">
scaleZ(0.6)<br>
<img src="simg.jpg">
</div>

<div class="demo5">
scale3d(0.6,0.6,0.6)<br>
<img src="simg.jpg">
</div>

transform:scaleはFireFox、Chrome、Edgeに対応(2021.7現在)

すべてのブラウザ種類を検証してないですが、transform:scaleはFireFox、Chrome、Edgeの最新バージョンには対応してました。(2021.7現在)
画像は実際のサイズより大きくすると解像度足りず荒れますが、タグ要素を実際より縮小表示させたり、アニメーションや演出で使用するときに使えます。

デモページ

タグ要素を拡大・縮小表示するデモ【transform:scale】

 

※流用される場合は自己責任でお願いします。
 デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。