rotateX、rotateY、rotateZを組み合わせた3D回転

多軸3D回転

3つの軸すべてを中心とした回転を組み合わせると、行列乗算の仕組みにより、複雑な3D方向が作成されます。回転の順序は最終的な外観に大きく影響します。

CSS

.element {
  transform: rotateX(30deg) rotateY(-45deg) rotateZ(15deg);
  perspective: 600px;
}

3つの軸

• rotateX — 前後に傾ける（うなずく動き）。正の値で上端がビューアーから離れる
• rotateY — 左右に回転（首を横に振る動き）。正の値で右端が離れる
• rotateZ — 画面平面内で回転（首を傾ける動き）。正の値で時計回り

回転の順序が重要

CSS transformは右から左に適用されます。宣言の最後の関数が最初に適用されます：

/* rotateZが最初に適用、次にrotateY、最後にrotateX */
transform: rotateX(30deg) rotateY(-45deg) rotateZ(15deg);

/* 異なる結果：rotateXが最初、次にrotateY、最後にrotateZ */
transform: rotateZ(15deg) rotateY(-45deg) rotateX(30deg);

代替：rotate3d()

任意の軸を中心とした単一回転にはrotate3d(x, y, z, angle)を使用：

.element {
  transform: rotate3d(1, 1, 0, 45deg);
}

これはベクトル(1, 1, 0)で定義される軸（X軸とY軸の対角線）を中心に45度回転します。