rotate3d() - 3D 旋转

语法说明

transform: rotate3d(x, y, z, angle);

• x, y, z - 定义旋转轴的 3D 向量（0-1 之间的数值）
• angle - 旋转角度
• rotate3d(1, 0, 0, 45deg) = rotateX(45deg)
• rotate3d(0, 1, 0, 45deg) = rotateY(45deg)
• rotate3d(0, 0, 1, 45deg) = rotateZ(45deg)
• 可以组合多个轴创建对角线旋转

示例 1：单轴旋转

分别围绕 X、Y、Z 轴旋转

/* X 轴旋转 */
.box-x {
  transform: rotate3d(1, 0, 0, 60deg);
}

/* Y 轴旋转 */
.box-y {
  transform: rotate3d(0, 1, 0, 60deg);
}

/* Z 轴旋转 */
.box-z {
  transform: rotate3d(0, 0, 1, 60deg);
}

示例 2：对角线旋转

同时在多个轴上旋转，创建对角线旋转效果

示例 3：连续 3D 旋转动画

创建立体旋转效果

@keyframes rotate3d-animation {
  0% {
    transform: rotate3d(1, 1, 1, 0deg);
  }
  100% {
    transform: rotate3d(1, 1, 1, 360deg);
  }
}

.box {
  animation: rotate3d-animation 3s linear;
}

常见应用场景