CSSのrotateY()関数は、要素のかたちは変えずに縦軸で回す変形を示します。回転の大きさは、角度で定められます。正数が時計回りで、負数は反時計回りです。
回転軸は、CSSのtransform-originプロパティで定められる原点をとおります。
rotateY(a)は、rotate3D(0, 1, 0, a)の簡潔な記述です。
平面における回転とは異なり、3次元の回転の組み合わせは一般に交換可能ではありません。つまり、回転を適用する順序は重要です。
構文
rotateY(a)
値
- a
- 回す角度を示す
<angle>値。正の角度が時計回り、負の角度は反時計回りを意味します。
| デカルト座標ℝ2 | 同次座標ℝℙ2 | デカルト座標ℝ3 | 同次座標ℝℙ3 |
|---|---|---|---|
| この変換は3次元空間に適用されます。平面に用いることはできません。 | |||
例
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;
}