使用 CSS rotate3d 和欧拉角旋转元素 - JavaScript

在 Web 开发中，让元素旋转起来是非常常见的需求。通过 CSS3 中的 rotate3d 属性和欧拉角（Euler Angle）即可轻松实现。本文将介绍如何使用 JavaScript 控制 CSS 的 rotate3d 属性和计算欧拉角来实现元素的旋转效果。

rotate3d 属性

rotate3d 属性用于在 3D 平面上旋转元素。它接受四个参数，分别表示坐标轴和旋转弧度值。

rotate3d(x, y, z, angle)

其中 x、y 和 z 表示旋转轴的坐标轴方向，取值范围为 -1 到 1。这里需要注意，旋转轴的坐标系是相对于元素的，而不是相对于文档的。因此，当元素发生旋转时，坐标轴也会跟着旋转。

angle 表示旋转的角度，单位为弧度。旋转方向按右手定则判断。如果旋转轴为 $(x,y,z)$，则右手的大拇指指向轴的正方向，剩余四个手指的蜷曲方向即为正方向。

欧拉角

欧拉角是描述物体在 3D 空间中位置和姿态的一种方式。通常将它分为三个角度：Yaw（偏航角）、Pitch（俯仰角）和 Roll（翻滚角）。它们分别表示绕着 y 轴、x 轴和 z 轴旋转的角度，单位为度或弧度。

欧拉角的使用可以简化 3D 旋转的计算，可以通过以下代码将一组欧拉角转换成 rotate3d 参数：

function euler2rotate3d(yaw, pitch, roll) {
  const rad = Math.PI / 180; // 弧度转换因子
  const y = Math.cos(yaw * rad / 2);
  const x = Math.sin(yaw * rad / 2) * Math.cos(pitch * rad / 2);
  const z = Math.sin(yaw * rad / 2) * Math.sin(pitch * rad / 2);
  const w = Math.cos(pitch * rad / 2) * Math.cos(roll * rad / 2);
  const angle = 2 * Math.acos(w);
  return `rotate3d(${x}, ${y}, ${z}, ${angle}rad)`;
}

上面的代码中，yaw、pitch 和 roll 分别表示偏航角、俯仰角和翻滚角。变量 x、y 和 z 利用四元数（Quaternions）的性质计算出旋转轴的方向，w 则计算出旋转的余弦值，从而得到旋转的角度。

在 JavaScript 中控制 CSS rotate3d

要在 JavaScript 中控制 CSS 的 rotate3d 属性，我们可以获取元素的样式对象（style）并设置 transform 属性值。以下代码将以 id 为 box 的元素绕着 y 轴旋转 30 度：

const box = document.getElementById('box');
box.style.transform = 'rotate3d(0, 1, 0, 30deg)';

如果希望实现动态旋转效果，在 JavaScript 中可以使用 setInterval 函数控制旋转的角度，再通过上述方式更新样式。

let angle = 0;
setInterval(() => {
  angle += 1;
  box.style.transform = `rotate3d(0, 1, 0, ${angle}deg)`;
}, 16);

上述代码中，每 16 毫秒将 angle 值增加 1，并将旋转角度赋值给样式的 transform 属性。通过这种方式，可以实现简单的 3D 旋转效果。

总结

本文介绍了如何使用 CSS 的 rotate3d 属性和 JavaScript 中计算欧拉角控制元素的 3D 旋转效果。欧拉角旋转的好处是计算简单，并且可以轻松控制元素在不同轴向上的旋转。但是需要注意的是，如果元素的旋转角度比较大，使用欧拉角可能会产生万向锁（Gimbal Lock）等问题。因此，在 3D 开发中，使用四元数或矩阵等方式计算旋转效果也是非常常见的。