我试图使用单个x>x>3函数同时旋转一个多维数据集的多个轴，但旋转却很奇怪。
如果我使用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);
}
我知道我可能需要应用一些数学运算才能使它起作用，但我对线性代数一无所知。有实现我想要的目标的公式吗？
编辑1：
我发现了this与我的问题类似的问题，但我仍然无法弄清楚。我尝试过<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>（sqrt（30²+45²）= 54），它更接近预期结果，但仍不是我要寻找的公式。
编辑2：
我发现a website可以根据任何其他变换函数来计算transform: rotate3d(-30, 45, 0, 54deg)。我的初始转换的结果矩阵为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，并且发现一些函数可以创建旋转矩阵并在mdn docs上乘以2个矩阵。但是，如果我为X轴创建一个90º的旋转矩阵，并将其乘以当前矩阵，然后将所得矩阵应用于CSS变换，则该多维数据集将对这些变换感到疯狂。我正在这样做：
window.getComputedStyle我真的很感谢这里的任何帮助。
答案 0 :(得分：1)
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，因为它也说{{3} }。
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
您还可以从计算样式中获得上述T矩阵。并从这里开始使用它。
现在让我们看看here on wolfram alpha是什么。 rotate3d(ux, uy, uz, a)将旋转点，使轴矢量u (ux, uy, uz)保持角度a。我们需要进行的转换是T。因此，现在我们需要以T的形式来表示广义的rotate3d。
我们将使用rotate3d公式找出轴。
| 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”，“ csSS 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))
));