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>
表示
| 属性名 | translate |
|---|---|
| 値 | none | <length-percentage> [ <length-percentage> <length>? ]? |
| 初期値 | none |
| 適用可能要素 | トランスフォーム可能要素 |
| 継承 | しない |
| サポート | https://caniuse.com/?search=translate |
transform の translate() と同様、X軸、Y軸、Z軸方向の移動を行います。値をひとつ指定するとX軸、2つ指定するとX軸とY軸、3つ指定するとX軸・Y軸・Z軸で移動します。
| 値 | 説明 |
|---|---|
| none | 移動しません。 |
| <length> | 移動距離を指定します。 |
以前は 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>