CSS - rotate

• トップ
• CSSリファレンス
• rotate

概要

説明

transform の rotate() と同様の回転を行います。

引数の指定方法により、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>

関連項目

リンク

• https://developer.mozilla.org/ja/docs/Web/CSS/rotate
• https://drafts.csswg.org/css-transforms-2/#individual-transforms