css - rotate3d 速记

Question

如何将 rotateX(50deg) rotateY(20deg) rotateZ(15deg) 组合成简写 rotate3d()？

Answer 1

rotateX(50deg) 等价于rotate3d(1, 0, 0, 50deg)

rotateY(20deg) 等价于rotate3d(0, 1, 0, 20deg)

rotateZ(15deg) 等价于rotate3d(0, 0, 1, 15deg)

所以...

rotateX(50deg) rotateY(20deg) rotateZ(15deg)

相当于

rotate3d(1, 0, 0, 50deg) rotate3d(0, 1, 0, 20deg) rotate3d(0, 0, 1, 15deg)

---

对于通用的 rotate3d(x, y, z, α)，您有矩阵

在哪里

---

您现在获得了 3 个 rotate3d 变换中每一个的矩阵，并将它们相乘。而生成的矩阵就是生成的单个rotate3d对应的矩阵。不确定从中提取 rotate3d 的值有多容易，但是提取单个 matrix3d 的值肯定很容易。

---

在第一种情况下(rotateX(50deg) 或 rotate3d(1, 0, 0, 50deg))，你有:

x = 1, y = 0, z = 0, α = 50deg

所以在这种情况下矩阵的第一行是 1 0 0 0。

第二个是0 cos(50deg) -sin(50deg) 0。

第三个0 sin(50deg) cos(50deg) 0。

而第四个显然是 0 0 0 1。

---

在第二种情况下，您有 x = 0、y = 1、z = 0、α = 20deg.

第一行:cos(20deg) 0 sin(20deg) 0。

第二行:0 1 0 0。

第三行:-sin(20) 0 cos(20deg) 0。

第四个:0 0 0 1

---

在第三种情况下，您有 x = 0、y = 0、z = 1、α = 15deg.

第一行:cos(15deg) -sin(15deg) 0 0。

第二行 sin(15deg) cos(15deg) 0 0.

第三行和第四行分别是0 0 1 0和0 0 0 1。

---

注意:您可能已经注意到 rotateY 变换的 sin 值符号与其他两个变换不同。这不是计算错误。这样做的原因是，对于屏幕，y 轴指向下方，而不是上方。

---

因此，这些是您需要相乘的三个 4x4 矩阵，以便为生成的单个 rotate3d 变换获得 4x4 矩阵。正如我所说，我不确定获取 4 个值有多容易，但 4x4 矩阵中的 16 个元素恰好是 matrix3d 的 16 个参数，相当于链式转换。

---

编辑:

实际上，事实证明这很简单...您计算 rotate3d 矩阵的矩阵轨迹(对 Angular 线元素之和)。

4 - 2*2*(1 - cos(α))/2 = 4 - 2*(1 - cos(α)) = 2 + 2*cos(α)

然后计算三个 4x4 矩阵乘积的迹，将结果等同于 2 + 2*cos(α) 并提取 α 。然后计算 x、y、z。

在这种特殊情况下，如果我计算正确，则由三个 4x4 矩阵乘积产生的矩阵轨迹将为:

T = 
cos(20deg)*cos(15deg) + 
cos(50deg)*cos(15deg) - sin(50deg)*sin(20deg)*cos(15deg) + 
cos(50deg)*cos(20deg) + 
1

所以 cos(α) = (T - 2)/2 = T/2 - 1，这意味着 α = acos(T/2 - 1) .