CSS
#box1 {
height: 12rem;
width: 12rem;
border: 1px solid #999;
}
#img1 {
translate: 4rem 4rem;
scale: 2.0;
rotate: 180deg;
}
HTML
<div id="box1"> <img id="img1" src="../../image/juno-tora.png" alt="Tora"> </div>
表示
| 属性名 | scale |
|---|---|
| 値 | none | [ <number> | <percentage> ]{1,3} |
| 初期値 | none |
| 適用可能要素 | トランスフォーム可能要素 |
| 継承 | しない |
| サポート | https://caniuse.com/?search=scale |
transform の scale() と同様、X軸、Y軸、Z軸方向の縮小・拡大を行います。値をひとつ指定するとX軸、2つ指定するとX軸とY軸、3つ指定するとX軸・Y軸・Z軸で縮小・拡大します。
| 値 | 説明 |
|---|---|
| none | 移動しません。 |
| <number> | 縮小・拡大率を 1.5 などの数値で指定します。 |
| <percentage> | 縮小・拡大率を 150% などのパーセントで指定します。 |
以前は transform プロパティを用いて下記の様に記述する必要がありましたが、translate プロパティでシンプルに記述できるようになりました。
/* 古い記述 */ transform: translate(4rem, 4rem) rotate(180deg) scale(2.0); /* 新しい記述 */ translate: 4rem 4rem; rotate: 180deg; scale 2.0;
#box1 {
height: 12rem;
width: 12rem;
border: 1px solid #999;
}
#img1 {
translate: 4rem 4rem;
scale: 2.0;
rotate: 180deg;
}
<div id="box1"> <img id="img1" src="../../image/juno-tora.png" alt="Tora"> </div>