MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

rotateY()

CSSのrotateY()関数は、要素のかたちは変えずに縦軸で回す変形を示します。回転の大きさは、角度で定められます。正数が時計回りで、負数は反時計回りです。

回転軸は、CSSのtransform-originプロパティで定められる原点をとおります。

rotateY(a)は、rotate3D(0, 1, 0, a)の簡潔な記述です。

平面における回転とは異なり、3次元の回転の組み合わせは一般に交換可能ではありません。つまり、回転を適用する順序は重要です。

構文

rotateY(a)

a
回す角度を示す<angle>値。正の角度が時計回り、負の角度は反時計回りを意味します。
デカルト座標ℝ2 同次座標ℝℙ2 デカルト座標ℝ3 同次座標ℝℙ3
この変換は3次元空間に適用されます。平面に用いることはできません。 cos(a)0sin(a)010-sin(a)0cos(a) cos(a)0sin(a)00100-sin(a)0cos(a)00001

HTML

<p>foo</p>
<p class="transformed">bar</p>

CSS

p {
  width: 50px;
  height: 50px;
  background-color: teal;
}

.transformed{
  transform: rotateY(60deg);
  background-color: blue;
}

結果

ドキュメントのタグと貢献者

 このページの貢献者: FumioNonaka
 最終更新者: FumioNonaka,