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