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