CSS rotate3d()関数の使い方

rotate3d関数では、3D空間内の要素の回転を行うことができます。この関数は、回転軸のx成分、y成分、z成分という3つの数値と、回転角度を表す数値という、合計4つの引数を受け取ります。

以下は、rotate3d()関数の使用例です。

.box {
width: 200px;
height: 200px;
background-color: red;
transform: rotate3d(1, 1, 1, 45deg);
}

この例では、200pxの高さ幅の赤いボックスを定義し、rotate3d()関数を使って、1つの軸沿いに45度回転させます。この回転軸のX、Y、Z成分はすべて1で、ボックスの中心を原点とし、方向が(1, 1, 1)であるベクトルに関して回転します。

回転軸の成分値と回転角度は必要に応じて調節してさまざまな回転効果を実現できます。回転角度は正負の値をとれます。正の値は時計回りの回転、負の値は反時計回りの回転を表します。

rotate3d() 関数を単独で使う以外にも、translate3d()、scale3d() などの他の変換関数と組み合わせて使用し、より複雑な 3D 変換効果を実現することもできます。