Javascript 如何组合css旋转？

退房

假设我要执行两个旋转。 首先绕z轴旋转45度，然后绕x轴旋转90度

如何将这两者结合起来？我的意思是，这可能是两个问题

在数学中，我想知道，如果我使用transform:rotate3dx，y，z，wdeg；，如何计算组合效应的x、y、z和w

在编程中，是否可以通过js改变div的样式来将这两者结合起来？我的意思是，编写代码在已经旋转的div上应用新的旋转以实现组合效果

更新：

目前，我有一个临时的粗暴回答：

transform: rotate3d(1, 0, 0, 90deg) rotate3d(0, 0, 1, 45deg);

但如果旋转操作列表很长，则每次执行操作时div的样式可能会变长：

transform: rotate3d(1, 0, 0, 90deg) rotate3d(0, 0, 1, 45deg) rotate3d(1, 0, 0, 90deg) rotate3d(0, 0, 1, 45deg) rotate3d(1, 0, 0, 90deg) rotate3d(0, 0, 1, 45deg) rotate3d(1, 0, 0, 90deg) rotate3d(0, 0, 1, 45deg) rotate3d(1, 0, 0, 90deg) rotate3d(0, 0, 1, 45deg) rotate3d(1, 0, 0, 90deg) rotate3d(0, 0, 1, 45deg) rotate3d(1, 0, 0, 90deg) rotate3d(0, 0, 1, 45deg) rotate3d(1, 0, 0, 90deg) rotate3d(0, 0, 1, 45deg) rotate3d(1, 0, 0, 90deg) rotate3d(0, 0, 1, 45deg);

---

还有更优雅的方法吗？

您可以组合多个转换，即使是相同类型的转换，如下所示：

transform: rotate3d(1, 0, 0, 90deg) rotate3d(0, 0, 1, 45deg);

如果您使用JavaScript更改DIV元素的样式，您只需替换transform属性，因此您需要首先获取值，然后附加额外的转换，就像上面的CSS一样

另见

并非所有rotate3d变换的组合都可以替换为单个rotate3d变换。但是，可以将多个变换组合为一个矩阵变换。我认为这超出了这个答案的范围，但如果你感兴趣，那么也许你应该看看这里：

如果您想以后继续添加转换，也许是以交互方式？正如您所建议的，您可以从元素中读回当前转换矩阵，并将其与更多转换结合起来

我在你的小提琴里摆弄了一些JS：

下面是一个例子，虽然不是最优雅的，但它可以在我的Firefox上运行：

var element = document.getElementById("div1");
var style = window.getComputedStyle(element);

//this will (probably) give you a matrix(..) transform representing the current transform of the element
var currentTransform = document.getElementById("div3").style.transform;

console.log(currentTransform)

//prepend another rotate3d transform to the current transform
document.getElementById("div3").style.transform = "rotate3d(1,0,0,90deg) "+style.transform;

---

更新：修复了损坏的转换并添加了如何添加更多转换的示例。

此顺序对我有效：

---

变换：旋转3d1,0,0,90度旋转3d0,0,1,45度

可能的重复是的重复，真正的问题是如何组合转换：。如果您只添加另一个包装器元素，然后只对外部元素应用一个旋转，对内部元素应用一个旋转，这不是更容易吗？@SvenvandeScheur这与您粘贴的链接完全不同。我试图按字面意思添加两个旋转，但最终结果不是我所期望的。@CBroe这不是我所期望的。在其他情况下，我可能会连续执行10次旋转。事实上，正如你所看到的，我想找到一种方法来一个接一个地应用旋转，也许是无休止的。我更新了JSFIDLE，你可以看到你的方法并没有产生我所期望的结果。是的，对不起，我弄乱了答案中的顺序。现在已修复。这可能是一个答案。但是如果我有数百次旋转呢？每次我表演一个，div的风格就会变得越来越长。你说的数百个旋转是什么意思？例如，每50次表演这两个旋转。你可以想象你正在玩魔方。你想旋转50个不同的方块还是在一个方块上制作一个循环动画？不是不同的方块。我的意思是，在同一个div上旋转50圈，但可能不会循环。

var element = document.getElementById("div1");
var style = window.getComputedStyle(element);

//this will (probably) give you a matrix(..) transform representing the current transform of the element
var currentTransform = document.getElementById("div3").style.transform;

console.log(currentTransform)

//prepend another rotate3d transform to the current transform
document.getElementById("div3").style.transform = "rotate3d(1,0,0,90deg) "+style.transform;