Aug.3rd,2021
＃
“rotateY()”関数
“rotateY()”関数は要素をY軸を回転軸として回転させるための関数です。
“<transform-function>”値として使用することができ、“transform”プロパティで要素を回転させることができます。
引数は1個の“<angle>”値で、回転する角度を表します。
rotateY(〚回転する角度〛)
値が正の数である場合はY軸の正の側から原点を見て時計回り、値が負の数である場合は反時計回りの回転を表します。回転する角度が0度の場合は単位を省略して“0”とすることができます。
回転軸は“transform-origin”プロパティで指定した原点を通ります。原点は既定では要素の中心です。
同様の回転は“rotate3d()”関数でも表すことができます。
Y軸を回転軸とする回転
rotate3d(0,1,0,〚回転する角度〛)
変形マトリクス
以下は“rotateY(a)”を表す変形マトリクスの成分です。
| m11 | m21 | m31 | m41 |
|---|---|---|---|
| m12 | m22 | m32 | m42 |
| m13 | m23 | m33 | m43 |
| m14 | m24 | m34 | m44 |
| calc(1 - 2 * pow(sin(a / 2),2)) | 0 | calc(-2 * sin(a / 2) * cos(a / 2)) | 0 |
| 0 | 1 | 0 | 0 |
| calc(-2 * sin(a / 2) * cos(a / 2)) | 0 | calc(1 - 2 * pow(sin(a / 2),2)) | 0 |
| 0 | 0 | 0 | 1 |
＃
使用例
.transform-1 { transform: rotateY(0);}
.transform-2 { transform: rotateY(30deg);}
.transform-3 { transform: rotateY(90deg);}
.transform-4 { transform: rotateY(180deg);}
.transform-5 { transform: rotateY(360deg);}
.transform-6 { transform: rotateY(-90deg);}
rotateY(0deg)
前
後
右
左
上
下
rotateY(30deg)
前
後
右
左
上
下
rotateY(90deg)
前
後
右
左
上
下
rotateY(180deg)
前
後
右
左
上
下
rotateY(360deg)
前
後
右
左
上
下
rotateY(-90deg)
前
後
右
左
上
下
＃
