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を記述
※.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現在)
画像は実際のサイズより大きくすると解像度足りず荒れますが、タグ要素を実際より縮小表示させたり、アニメーションや演出で使用するときに使えます。
タグ要素を拡大・縮小表示するデモ【transform:scale】ページ
タグ要素を拡大・縮小表示するデモ【transform:scale】
※流用される場合は自己責任でお願いします。
デモページ