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

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

Contents

.demo1～5のimgタグ要素を2次元（x,y）または3次元（x,y,z）に拡大・縮小したCSSを記述
タグ要素を2次元（x,y）または3次元（x,y,z）に拡大・縮小表示するHTMLの記述
transform:scaleはFireFox、Chrome、Edgeに対応（2021.7現在）
タグ要素を拡大・縮小表示するデモ【transform:scale】ページ

.demo1～5のimgタグ要素を2次元（x,y）または3次元（x,y,z）に拡大・縮小したCSSを記述

※.demo1～5のimgタグ要素の2次元（x,y）または3次元（x,y,z）に拡大・縮小したCSS記述です。必要に応じて書き換えてください。

<style>
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>

タグ要素を2次元（x,y）または3次元（x,y,z）に拡大・縮小表示するHTMLの記述

※class=”demo1″～class=”demo5″のタグ内に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現在）
画像は実際のサイズより大きくすると解像度足りず荒れますが、タグ要素を実際より縮小表示させたり、アニメーションや演出で使用するときに使えます。