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