rotateX()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.
Please take two minutes to fill out our short survey.

rotateX() は CSS の関数で、要素の形を変化させずに横座標 (水平軸) の周りを回転させる座標変換を定義します。結果は <transform-function> データ型になります。

試してみましょう

transform: rotateX(0);

transform: rotateX(45deg);

transform: rotateX(-0.2turn);

transform: rotateX(3.142rad);

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

回転軸は、CSS の transform-origin プロパティで定義される原点を通ります。

メモ: rotateX(a) は rotate3d(1, 0, 0, a) と等価です。

メモ: 2D 平面での回転とは異なり、 3D での回転はふつう交換可能ではありません。言い換えれば、回転の順番が結果に影響を与えます。

構文

rotateX() で生成される回転の量は、 <angle> で指定します。正の数であれば、移動は時計回りです。負の数であれば、反時計回りになります。

css
rotateX(a)

値

a

<angle> で、回転する角度を表します。正の数の角度は時計回りの回転を、負の数の角度は反時計回りの回転を表します。

直交座標系 (ℝ^2) 同次座標系 (ℝℙ^2) 直交座標系 (ℝ^3) 同次座標系 (ℝℙ^3)
この変換は 3D 空間に適用され、平面で表すことはできません。 (1 0 0 0 cos ( a ) - sin ( a ) 0 sin ( a ) cos ( a )) (1 0 0 0 0 cos ( a ) - sin ( a ) 0 0 sin ( a ) cos ( a ) 0 0 0 0 1)

例

HTML

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

CSS

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

.rotated {
  transform: rotateX(45deg);
  background-color: pink;
}

結果

仕様書

Specification
CSS Transforms Module Level 2
# funcdef-rotatex

ブラウザーの互換性

関連情報