rotateY()

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.

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

試してみましょう

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

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

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

構文

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

css
rotateY(a)

a

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

直交座標系 (ℝ^2) 同次座標系 (ℝℙ^2) 直交座標系 (ℝ^3) 同次座標系 (ℝℙ^3)
この変換は 3D 空間に適用され、平面で表すことはできません。 (cos ( a ) 0 sin ( a ) 0 1 0 - sin ( a ) 0 cos ( a )) (cos ( a ) 0 sin ( a ) 0 0 1 0 0 - sin ( a ) 0 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: rotateY(60deg);
  background-color: pink;
}

結果

仕様書

Specification
CSS Transforms Module Level 2
# funcdef-rotatey

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
rotateY()

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報