Aug.3rd,2021
＃
“rotateZ()”関数
“rotateZ()”関数は要素をZ軸を回転軸として回転させるための関数です。
“<transform-function>”値として使用することができ、“transform”プロパティで要素を回転させることができます。
引数は1個の“<angle>”値で、回転する角度を表します。
rotateZ(〚回転する角度〛)
値が正の数である場合はZ軸の正の側から原点を見て時計回り、値が負の数である場合は反時計回りの回転を表します。回転する角度が0度の場合は単位を省略して“0”とすることができます。
回転軸は“transform-origin”プロパティで指定した原点を通ります。原点は既定では要素の中心です。
同様の回転は“rotate3d()”関数でも表すことができます。
Z軸を回転軸とする回転
rotate3d(0,0,1,〚回転する角度〛)
また、“rotateZ()”関数は二次元平面上での回転を表す“rotate()”関数と同じ意味です。
変形マトリクス
以下は“rotateZ(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)) | 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 | 0 |
| 0 | 0 | 0 | 1 |
＃
使用例
.transform-1 { transform: rotateZ(0);}
.transform-2 { transform: rotateZ(30deg);}
.transform-3 { transform: rotateZ(90deg);}
.transform-4 { transform: rotateZ(180deg);}
.transform-5 { transform: rotateZ(360deg);}
.transform-6 { transform: rotateZ(-90deg);}
rotateZ(0deg)
前
後
右
左
上
下
rotateZ(30deg)
前
後
右
左
上
下
rotateZ(90deg)
前
後
右
左
上
下
rotateZ(180deg)
前
後
右
左
上
下
rotateZ(360deg)
前
後
右
左
上
下
rotateZ(-90deg)
前
後
右
左
上
下
＃
