CSS高级3D旋转控制：实现基于用户视角的轴旋转

要解决物体基于用户视角而非自身视角旋转的问题，核心在于避免CSS变换的局部坐标系叠加影响——默认的rotateX/rotateY会基于物体当前的局部坐标系旋转，而我们需要始终基于全局（用户视角）的X/Y轴进行旋转。下面是具体的实现思路和代码示例：

核心原理 #

CSS的transform变换是按顺序叠加的，每次旋转都会改变物体的局部坐标系。要实现全局坐标系旋转，我们有两种直观的实现方式：

方法1：嵌套容器分离轴旋转（易理解好维护） #

把X轴和Y轴的旋转分别交给两个嵌套容器，外层容器负责全局Y轴旋转，内层容器负责全局X轴旋转，配合transform-style: preserve-3d维持3D空间，就能保证旋转始终基于用户视角的坐标系。

HTML结构

<div class="rotation-outer">
  <div class="rotation-target">你的目标物体</div>
</div>

基础CSS样式

.rotation-outer {
  transform-style: preserve-3d;
  perspective: 1000px; /* 可选，增强3D视觉层次感 */
}
.rotation-target {
  transform-style: preserve-3d;
  /* 可以添加物体本身的样式，比如宽高、背景色 */
  width: 200px;
  height: 200px;
  background: #2c3e50;
}

JS逻辑实现

结合你定义的变量，我们可以在滚动事件中更新缓冲值，再通过动画帧平滑过渡到目标旋转角度：

var bX = 0; // bufferX (用户滚动输入)
var bY = 0; // bufferY (用户滚动输入)
var cX = 0; // currentX (有效X轴旋转值)
var cY = 0; // currentY (有效Y轴旋转值)
var bBX = 0; // 第二组旋转属性变量
var bBY = 0;
var cBX = 0;
var cBY = 0;

// 监听滚动事件更新缓冲值（可根据需求调整敏感度）
$(window).on('wheel', function(e) {
  bX += e.originalEvent.deltaY * 0.4;
  bY += e.originalEvent.deltaX * 0.4;
  // 第二组变量同理，比如绑定另一个输入源
  // bBX += ...
});

// 平滑更新并应用旋转
function updateRotation() {
  // 平滑过渡当前值到缓冲值（0.1是缓动系数，值越大过渡越快）
  cX += (bX - cX) * 0.1;
  cY += (bY - cY) * 0.1;
  cBX += (bBX - cBX) * 0.1;
  cBY += (bBY - cBY) * 0.1;

  // 应用第一组旋转到嵌套容器
  $('.rotation-outer').css('transform', `rotateY(${cY}deg)`);
  $('.rotation-target').css('transform', `rotateX(${cX}deg)`);
  
  // 第二组旋转可以应用到另一个嵌套容器组合
  // $('.rotation-outer-2').css('transform', `rotateY(${cBY}deg)`);
  // $('.rotation-target-2').css('transform', `rotateX(${cBX}deg)`);

  requestAnimationFrame(updateRotation);
}

// 启动旋转更新循环
updateRotation();

方法2：使用3D变换矩阵计算全局旋转（精确控制） #

如果需要更精细的控制，可以直接通过矩阵乘法计算全局旋转的最终变换矩阵，绕过CSS的局部坐标系限制。

首先添加辅助函数处理角度转弧度、余弦正弦计算：

const rad = deg => deg * Math.PI / 180;
const cos = deg => Math.cos(rad(deg));
const sin = deg => Math.sin(rad(deg));

然后编写矩阵计算函数，生成全局X/Y轴旋转的3D变换矩阵：

function getGlobalRotationMatrix(xDeg, yDeg) {
  const cx = cos(xDeg), sx = sin(xDeg);
  const cy = cos(yDeg), sy = sin(yDeg);
  
  // 矩阵顺序：先绕全局X轴旋转，再绕全局Y轴旋转
  return [
    cy,   0,    sy,   0,
    sx*sy, cx, -sx*cy, 0,
    -cx*sy, sx, cx*cy, 0,
    0,    0,    0,   1
  ].join(', ');
}

最后在更新逻辑中直接应用矩阵：

function updateRotation() {
  cX += (bX - cX) * 0.1;
  cY += (bY - cY) * 0.1;
  
  $('.rotation-target').css('transform', `matrix3d(${getGlobalRotationMatrix(cX, cY)})`);
  
  requestAnimationFrame(updateRotation);
}

内容的提问来源于stack exchange，提问作者Pierre Rose