【CSS Modules】rotate3d()関数の使い方
rotate3d()関数の使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
rotate3d()関数は、CSSのtransformプロパティと組み合わせて使用され、要素を3D空間内で指定された任意の軸を中心に回転させる関数です。
この関数は、XYZ軸で定義される3次元空間において、カスタムの回転軸と角度を指定して要素を回転変形させます。これにより、柔軟かつ複雑な3D回転表現が可能になります。
rotate3d()関数は、四つの引数を取ります。最初の三つの引数（x、y、z）は回転軸の方向を示すベクトルの各成分を指定し、通常0から1の範囲で正規化された数値を使用します。例えば、rotate3d(1, 0, 0, angle)はX軸周りの回転を、rotate3d(0, 1, 0, angle)はY軸周りの回転を意味します。第四の引数には、要素を回転させる角度を指定します。角度の単位にはdeg（度数）、rad（ラジアン）、grad（グラジアン）、turn（ターン）などが利用可能で、正の値は時計回り、負の値は反時計回りの回転を適用します。
この関数を用いることで、要素に奥行きのあるダイナミックな動きを与え、ユーザーインターフェースの表現力を高めます。3D変形効果を自然に見せるためには、親要素にperspectiveプロパティの設定も推奨されます。
公式リファレンス: rotate3d()
構文(syntax)
1transform: rotate3d(x, y, z, angle);
引数(parameters)
x: <number>, y: <number>, z: <number>, angle: <angle>
- x: <number>: 3次元空間における回転軸のX成分を指定します。
- y: <number>: 3次元空間における回転軸のY成分を指定します。
- z: <number>: 3次元空間における回転軸のZ成分を指定します。
- angle: <angle>: 回転させる角度を指定します。
戻り値(return)
戻り値なし
戻り値はありません