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>
表示
| 属性名 | rotate |
|---|---|
| 値 | none | <angle> | [ x | y | z | <number>{3} ] && <angle> |
| 初期値 | none |
| 適用可能要素 | トランスフォーム可能要素 |
| 継承 | しない |
| サポート | https://caniuse.com/?search=rotate |
transform の rotate() と同様の回転を行います。
| 値 | 説明 |
|---|---|
| none | 回転しません。 |
| <angle> | 回転角度を指定します。 |
引数の指定方法により、rotate(), rotateX(), rotateY(), rotateZ(), rotate3d() と同様の働きとなります。
rotate: 90deg; /* transform: rotate(90deg) */ rotate: x 90deg; /* transform: rotateX(90deg) */ rotate: y 90deg; /* transform: rotateY(90deg) */ rotate: z 90deg; /* transform: rotateZ(90deg) */ rotate: 1 2 3 90deg; /* transform: rotate3d(1, 2, 3, 90deg) */
以前は 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>