Aug.3rd,2021
＃
“rotate3d()”関数
“rotate3d()”関数は要素を三次元空間内で指定した回転軸を中心に回転させるための関数です。
“<transform-function>”値として使用することができ、“transform”プロパティで要素を回転させることができます。
引数は3個の“<number>”値と1個の“<angle>”値をコンマ“,”で区切って記述します。
rotate3d(〚回転軸のX成分〛,〚回転軸のY成分〛,〚回転軸のZ成分〛,〚回転する角度〛)
最初の3個の引数は回転軸を表すベクトルの成分を表し、X成分、Y成分、Z成分の順に記述します。
“<number>”値の範囲に制限はありませんが、3個の“<number>”値の二乗和平方根が“1”でない場合は内部的に正規化されます。3個の引数がともに“0”である場合など、正規化できない場合は回転しません。
4個目の引数は回転する角度を表します。正の数は回転軸を表すベクトルの終点から始点を見たときの時計回り、負の数は反時計回りを表します。回転する角度が0度の場合は単位を省略して“0”とすることができます。
回転軸は“transform-origin”プロパティで指定した原点を通ります。原点は既定では要素の中心です。
変形マトリクス
以下は“rotate3d(x,y,z,a)”を表す変形マトリクスの成分です。
| m11 | m21 | m31 | m41 |
|---|---|---|---|
| m12 | m22 | m32 | m42 |
| m13 | m23 | m33 | m43 |
| m14 | m24 | m34 | m44 |
| calc(1 - 2 * (pow(y,2) + pow(z,2)) * pow(sin(a / 2),2)) | calc(2 * x * y * pow(sin(a / 2),2) - z * sin(a / 2) * cos(a / 2)) | calc(2 * x * z * pow(sin(a / 2),2) + y * sin(a / 2) * cos(a / 2)) | 0 |
| calc(2 * x * y * pow(sin(a / 2),2) + z * sin(a / 2) * cos(a / 2)) | calc(1 - 2 * (pow(x,2) + pow(z,2)) * pow(sin(a / 2),2)) | calc(2 * y * z * pow(sin(a / 2),2) - x * sin(a / 2) * cos(a / 2)) | 0 |
| calc(2 * x * z * pow(sin(a / 2),2) - y * sin(a / 2) * cos(a / 2)) | calc(2 * y * z * pow(sin(a / 2),2) + x * sin(a / 2) * cos(a / 2)) | calc(1 - 2 * (pow(x,2) + pow(y,2)) * pow(sin(a / 2),2)) | 0 |
| 0 | 0 | 0 | 1 |
＃
使用例
.transform-1 { transform: rotate3d(1,0,0,180deg);}
.transform-2 { transform: rotate3d(0,1,0,180deg);}
.transform-3 { transform: rotate3d(0,1,0,180deg);}
.transform-4 { transform: rotate3d(1,1,0,180deg);}
.transform-5 { transform: rotate3d(0,1,1,180deg);}
.transform-6 { transform: rotate3d(1,0,1,180deg);}
.transform-7 { transform: rotate3d(1,1,1,180deg);}
.transform-8 { transform: rotate3d(1,1,1,-180deg);}
rotate3d(1,0,0,180deg)
前
後
右
左
上
下
rotate3d(0,1,0,180deg)
前
後
右
左
上
下
rotate3d(0,1,0,180deg)
前
後
右
左
上
下
rotate3d(1,1,0,180deg)
前
後
右
左
上
下
rotate3d(0,1,1,180deg)
前
後
右
左
上
下
rotate3d(1,0,1,180deg)
前
後
右
左
上
下
rotate3d(1,1,1,180deg)
前
後
右
左
上
下
rotate3d(1,1,1,-180deg)
前
後
右
左
上
下
＃
