CSS立方体多轴旋转异常：首个变换沿绝对轴，后续沿相对轴求解

问题原因 #

CSS transform 的变换函数是按从左到右的顺序依次应用，但每一个后续变换都是基于前一个变换完成后元素自身的局部坐标系，而非页面的全局绝对坐标系。

举个例子，当你写 rotateX(x) rotateY(y) rotateZ(z) 时：

• 第一个 rotateX 基于页面原始的绝对X轴旋转
• 之后的 rotateY 是基于旋转后的立方体自身的Y轴（已经随X轴旋转改变了方向）
• 最后的 rotateZ 则基于经过X、Y旋转后的立方体自身Z轴

这就是为什么你看到首个旋转是绝对轴，后续是相对轴的原因——这是CSS变换的默认叠加规则。

解决方案 #

方案1：全部基于绝对轴（全局坐标系）旋转 #

要让所有旋转都基于页面的绝对坐标系，需要调整变换顺序，按 Z → Y → X 的顺序应用变换（因为CSS变换是右乘矩阵，这种顺序能保证每个旋转都基于全局坐标系）。

修改JS中的recalibrate函数：

const recalibrate = function() {
  const angle_x = input_x.value;
  const angle_y = input_y.value;
  const angle_z = input_z.value;
  // 绝对轴旋转：按 Z → Y → X 的顺序
  cube.style.transform = `rotateZ(${angle_z}deg) rotateY(${angle_y}deg) rotateX(${angle_x}deg)`;
}

方案2：全部基于相对轴（立方体自身坐标系）旋转 #

如果想模拟真实物体的旋转（旋转后轴随立方体移动），需要记录当前旋转状态，每次滑块更新时叠加角度增量，而非直接设置绝对角度：

// 初始化累积旋转角度
let currentX = 0;
let currentY = 0;
let currentZ = 0;
// 记录上一次滑块值，用于计算增量
let lastX = 0;
let lastY = 0;
let lastZ = 0;

const recalibrate = function() {
  // 计算滑块的角度变化量
  const deltaX = input_x.value - lastX;
  const deltaY = input_y.value - lastY;
  const deltaZ = input_z.value - lastZ;
  
  // 更新累积角度
  currentX += deltaX;
  currentY += deltaY;
  currentZ += deltaZ;
  
  // 应用基于自身坐标系的旋转
  cube.style.transform = `rotateX(${currentX}deg) rotateY(${currentY}deg) rotateZ(${currentZ}deg)`;
  
  // 更新上一次的滑块值
  lastX = input_x.value;
  lastY = input_y.value;
  lastZ = input_z.value;
}

// 初始化滑块默认值
input_x.value = 0;
input_y.value = 0;
input_z.value = 0;
lastX = 0;
lastY = 0;
lastZ = 0;

小修复：滑块初始值问题 #

你的HTML中X滑块的min属性是-0，建议改为0（如果需要支持负角度可以设为-360）：

<input type="range" class="slider_x" min="0" max="360">

内容的提问来源于stack exchange，提问作者Arsh Tripathi