我正在尝试使用单个rotate3d函数同时旋转多维数据集的多个轴，但是却出现了怪异的旋转。
如果使用transform: rotateX(-30deg) rotateY(45deg)，我会看到一个不错的视角，但是如果使用transform: rotate3d(-2, 3, 0, 15deg)，这个角度看起来很奇怪。
* { box-sizing: border-box; }
.scene {
width: 50px;
height: 50px;
}
.cube {
width: 50px;
height: 50px;
margin: 50px;
position: relative;
transform-style: preserve-3d;
transform: rotateX(-30deg) rotateY(45deg); /* works as expected */
/* transform: rotate3d(-2, 3, 0, 15deg); */ /* looks very weird */
transition: transform 1s;
}
.cube__face {
position: absolute;
width: 50px;
height: 50px;
border: 1px solid black;
}
.cube__face--front {
background: hsla( 0, 100%, 50%, 0.7);
transform: rotateY( 0deg) translateZ(25px);
}
.cube__face--right {
background: hsla( 60, 100%, 50%, 0.7);
transform: rotateY( 90deg) translateZ(25px);
}
.cube__face--back {
background: hsla(120, 100%, 50%, 0.7);
transform: rotateY(180deg) translateZ(25px);
}
.cube__face--left {
background: hsla(180, 100%, 50%, 0.7);
transform: rotateY(-90deg) translateZ(25px);
}
.cube__face--top {
background: hsla(240, 100%, 50%, 0.7);
transform: rotateX( 90deg) translateZ(25px);
}
.cube__face--bottom {
background: hsla(300, 100%, 50%, 0.7);
transform: rotateX(-90deg) translateZ(25px);
}<div class="cube">
<div class="cube__face cube__face--front"></div>
<div class="cube__face cube__face--back"></div>
<div class="cube__face cube__face--right"></div>
<div class="cube__face cube__face--left"></div>
<div class="cube__face cube__face--top"></div>
<div class="cube__face cube__face--bottom"></div>
</div>我知道我可能需要应用一些数学运算才能使它起作用，但我对线性代数一无所知。有没有实现我想要的方案？
编辑1：
我发现了与我类似的this问题，但是我仍然无法弄清楚。我尝试了
transform: rotate3d(-30, 45, 0, 54deg)（sqrt（30²+45²）= 54），它更接近预期结果，但仍不是我要寻找的公式。编辑2：
我发现a website可以基于任何其他转换函数来计算
matrix3d。我最初转换的结果矩阵是matrix3d(0.707107, 0.353553, 0.612372, 0, 0, 0.866025, -0.5, 0, -0.707107, 0.353553, 0.612372, 0, 0, 0, -100, 1)，它就像一个符咒！但是我需要动态地做到这一点。我可以使用
matrix3d获取元素的当前window.getComputedStyle，并且发现了一些函数来创建旋转矩阵并在mdn docs上乘以2个矩阵。但是，如果我为X轴创建一个90º的旋转矩阵，并将其乘以当前矩阵，然后将所得矩阵应用于CSS变换，则该多维数据集将对这些变换感到疯狂。我正在这样做：const matrix = window.getComputedStyle(cube).transform.slice(9, -1).split(', ').map(Number)
const rotation = rotateAroundXAxis(90)
const final = multiplyMatrices(matrix, rotation)
cube.style.transform = `matrix3d(${final.join(', ')})`
我真的很感谢这里的任何帮助。
最佳答案
TL; DR rotate3d(0.853553, -1.319479, 0.353553, -0.936325rad)
好的，所以我不知道从哪里开始，但是让我解释一下转换是如何工作的。因此，任何3d转换（例如旋转，平移，剪切，缩放等）都可以4x4均匀矩阵的形式表示。 （因此css matrix3d取16个值）
假设我们有一个4x4的矩阵T，我们要变换一个点(x, y, z)，以便新的点是(x', y', z')。我们可以通过执行以下矩阵乘法来找出新的点：
| x' | | T11 T12 T13 T14 | | x |
| y' | = | T21 T22 T23 T24 | x | y |
| z' | | T31 T32 T33 T34 | | z |
| 1 | | T41 T42 T43 T44 | | 1 |
现在，如果变换不涉及任何翻译，我们也可以用3x3矩阵表示这种变换（afaik）。在这种情况下，如果使用以下矩阵乘法找到了新点：
| x' | | T11 T12 T13 | | x |
| y' | = | T21 T22 T23 | x | y |
| z' | | T31 T32 T33 | | z |
好的，现在让我们首先以这种矩阵形式表示
rotateX(-30deg) rotateY(45deg)。我将根据给定的here使用Rx(Θ)和Ry(Θ)来查找净转换矩阵T。同样，css也会旋转轴/ FOR而不是点，因此对我们来说-30deg将是30deg，而45deg将是-45deg，因为它也说了here。T = Ry(-45deg) x Rx(30deg) // order of multiplication is important, what happens first is rightmost then things are added on left
= | 0.707107 -0.353553 -0.612372 |
| 0 0.866025 -0.5 |
| 0.707107 0.353553 0.612372 |
≈ | 0.707107 -0.353553 -0.612372 0 | // same as above but 4x4 version
| 0 0.866025 -0.5 0 | // this is what getComputedStyle gives
| 0.707107 0.353553 0.612372 0 |
| 0 0 0 1 |
计算here on wolfram alpha
您也可以从计算样式中获得上述
T矩阵。并从此开始使用。现在，让我们看看什么是
rotate3d。 rotate3d(ux, uy, uz, a)将旋转点，使轴矢量u (ux, uy, uz)保持角度a。我们需要进行的转换是T。因此，现在我们需要以T的形式表达广义的rotate3d。我们将使用this公式找出轴。
| ux | | (0.353553) - (-0.5) | | 0.853553 |
| uy | = | (-0.612372) - (0.707107) | = | -1.319479 |
| uz | | (0) - (-0.353553) | | 0.353553 |
我们将使用this公式找出角度。
0 = arccos((0.707107 + 0.866025 + 0.612372 - 1) / 2)
= 0.936325 rad // ie -0.936325 rad according to CSS convention
所以最后
rotateX(-30deg) rotateY(45deg)与rotate3d(0.853553, -1.319479, 0.353553, -0.936325rad)相同演示：
[...document.querySelectorAll("[name='transform']")]
.forEach(radio => {
radio.addEventListener("change", () => {
let selectedTransform = document.querySelector("[name='transform']:checked").value;
let cubeClasses = document.querySelector(".cube").classList;
cubeClasses.remove("transform-a", "transform-b", "transform-c");
cubeClasses.add(selectedTransform)
})
})* { box-sizing: border-box; }
.scene {
width: 50px;
height: 50px;
}
.cube {
width: 50px;
height: 50px;
margin: 50px;
position: relative;
transform-style: preserve-3d;
transition: transform 1s;
}
.cube.transform-a {
transform: rotateX(-30deg) rotateY(45deg);
}
.cube.transform-b {
transform: rotate3d(0.853553, -1.319479, 0.353553, -0.936325rad);
}
.cube.transform-c {
transform: matrix3d(0.707107, -0.353553, -0.612372, 0, 0, 0.866025, -0.5, 0, 0.707107, 0.353553, 0.612372, 0, 0, 0, 0, 1);
}
.cube__face {
position: absolute;
width: 50px;
height: 50px;
border: 1px solid black;
}
.cube__face--front {
background: hsla( 0, 100%, 50%, 0.7);
transform: rotateY( 0deg) translateZ(25px);
}
.cube__face--right {
background: hsla( 60, 100%, 50%, 0.7);
transform: rotateY( 90deg) translateZ(25px);
}
.cube__face--back {
background: hsla(120, 100%, 50%, 0.7);
transform: rotateY(180deg) translateZ(25px);
}
.cube__face--left {
background: hsla(180, 100%, 50%, 0.7);
transform: rotateY(-90deg) translateZ(25px);
}
.cube__face--top {
background: hsla(240, 100%, 50%, 0.7);
transform: rotateX( 90deg) translateZ(25px);
}
.cube__face--bottom {
background: hsla(300, 100%, 50%, 0.7);
transform: rotateX(-90deg) translateZ(25px);
}<div class="cube transform-b">
<div class="cube__face cube__face--front"></div>
<div class="cube__face cube__face--back"></div>
<div class="cube__face cube__face--right"></div>
<div class="cube__face cube__face--left"></div>
<div class="cube__face cube__face--top"></div>
<div class="cube__face cube__face--bottom"></div>
</div>
<label>
<input type="radio" name="transform" value="transform-a"/>
<code>rotateX(-30deg) rotateY(45deg)</code>
</label>
<label><br>
<input type="radio" name="transform" value="transform-b" checked/>
<code>rotate3d(0.853553, -1.319479, 0.353553, -0.936325rad)</code>
</label>
<label><br>
<input type="radio" name="transform" value="transform-c"/>
<code>matrix3d(0.707107, -0.353553, -0.612372, 0, 0, 0.866025, -0.5, 0, 0.707107, 0.353553, 0.612372, 0, 0, 0, 0, 1)</code>
</label>所有这些复杂性和数学运算，然后他们说“ csS iS nOt PrOgRaMmInG”“ css iS eAsY” xD：P
这是一个用于计算
rotate3d的普通JS实现：class Matrix {
constructor(raw) {
this.raw = raw;
}
static ofRotationX(a) {
return new Matrix([
[1, 0, 0],
[0, Math.cos(a), -Math.sin(a)],
[0, Math.sin(a), Math.cos(a)]
])
}
static ofRotationY(a) {
return new Matrix([
[Math.cos(a), 0, Math.sin(a)],
[0, 1, 0],
[-Math.sin(a), 0, Math.cos(a)]
])
}
static ofRotationZ(a) {
return new Matrix([
[Math.cos(a), -Math.sin(a), 0],
[Math.sin(a), Math.cos(a), 0],
[0, 0, 1],
])
}
get trace() {
let { raw } = this;
return raw[0][0] + raw[1][1] + raw[2][2];
}
multiply(matB) {
let { raw: a } = this;
let { raw: b } = matB;
return new Matrix([
[
a[0][0] * b[0][0] + a[0][1] * b[1][0] + a[0][2] * b[2][0],
a[0][0] * b[0][1] + a[0][1] * b[1][1] + a[0][2] * b[2][1],
a[0][0] * b[0][2] + a[0][1] * b[1][2] + a[0][2] * b[2][2]
],
[
a[1][0] * b[0][0] + a[1][1] * b[1][0] + a[1][2] * b[2][0],
a[1][0] * b[0][1] + a[1][1] * b[1][1] + a[1][2] * b[2][1],
a[1][0] * b[0][2] + a[1][1] * b[1][2] + a[1][2] * b[2][2]
],
[
a[2][0] * b[0][0] + a[2][1] * b[1][0] + a[2][2] * b[2][0],
a[2][0] * b[0][1] + a[2][1] * b[1][1] + a[2][2] * b[2][1],
a[2][0] * b[0][2] + a[2][1] * b[1][2] + a[2][2] * b[2][2]
]
]);
}
}
function getRotate3d(transMat) {
let { raw: t } = transMat;
return {
axis: [t[2][1] - t[1][2], t[0][2] - t[2][0], t[1][0] - t[0][1]],
angle: -1 * Math.acos((transMat.trace - 1)/2)
}
}
console.log(getRotate3d(
Matrix.ofRotationY(-45 * Math.PI/180)
.multiply(Matrix.ofRotationX(30 * Math.PI/180))
));