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】
※流用される場合は自己責任でお願いします。
デモページ
ディスプレイ広告
ディスプレイ広告