--- title: rotate() slug: Web/CSS/transform-function/rotate() tags: - CSS - CSS 変換 - CSS 関数 - Reference translation_of: Web/CSS/transform-function/rotate() ---
{{CSSRef}}

CSS の rotate() 関数は、要素を二次元平面上の特定の点を中心に、変形させずに回転させます。結果は {{cssxref("<transform-function>")}} データ型になります。

要素が回転する中心となる特定の点 — 前述 — は、変形原点とも呼ばれます。既定では要素の中央ですが、 {{ cssxref("transform-origin") }} プロパティを使用して独自の変形原点を設定することができます。

構文

rotate() で生成される回転の量は、 {{cssxref("<angle>")}} で指定します。正の数であれば、移動は時計回りです。負の数であれば、反時計回りになります。180度で回転したものは点対称と呼ばれます。

rotate(a)

値

a
{{ cssxref("<angle>") }} で、回転する角度を表します。正の数の角度は時計回りの回転を、負の数の角度は反時計回りの回転を表します。
ℝ2 のデカルト座標 ℝℙ2 の同次座標 ℝ3 のデカルト座標 ℝℙ3 の同次座標
cos(a)-sin(a) sin(a)cos(a) cos(a)-sin(a)0sin(a)cos(a)0001 cos(a)-sin(a)0sin(a)cos(a)0001 cos(a)-sin(a)00sin(a)cos(a)0000100001
[cos(a) sin(a) -sin(a) cos(a) 0 0]

例

基本的な例

HTML

<div>Normal</div>
<div class="rotated">Rotated</div>

CSS

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.rotated {
  transform: rotate(45deg); /* rotateZ(45deg) と等価 */
  background-color: pink;
}

結果

{{EmbedLiveSample("Basic_example", "auto", 180)}}

回転とその他の変形の組み合わせ

複数の変形を要素に適用したい場合は、変形を指定する順序に気を付けてください。例えば、平行移動前に回転すると、平行移動によって回転の軸が変わってしまいます。

HTML

<div>Normal</div>
<div class="rotate">Rotated</div>
<div class="rotate-translate">Rotated + Translated</div>
<div class="translate-rotate">Translated + Rotated</div>

CSS

div {
  position: absolute;
  left: 40px;
  top: 40px;
  width: 100px;
  height: 100px;
  background-color: lightgray;
}

.rotate {
  background-color: transparent;
  outline: 2px dashed;
  transform: rotate(45deg);
}

.rotate-translate {
  background-color: pink;
  transform: rotate(45deg) translateX(180px);
}

.translate-rotate {
  background-color: gold;
  transform: translateX(180px) rotate(45deg);
}

結果

{{EmbedLiveSample("Combining_rotation_with_another_transformation", "auto", 320)}}

仕様書

仕様書 状態 備考
{{SpecName("CSS3 Transforms", "#funcdef-transform-rotate", "rotate()")}} {{Spec2("CSS3 Transforms")}} 初回定義

ブラウザーの対応

<transform-function> データ型の互換性情報をご覧ください。

関連情報