Question

签出https://jsfiddle.net/u5L1dmvx/

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

假设我想进行两次旋转。首先绕z轴旋转45度，然后绕x轴旋转90度。

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

在数学上，我想知道，如果我使用transform: rotate3d(x, y, z, wdeg);，如何计算合并后的x，y，z和w效果？

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

更新：

目前我有一个临时的蛮力答案：

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

但是，如果旋转操作列表很长，则style中的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);

还有更优雅的方式吗？

Answer 1

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

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

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

另请参阅 https://developer.mozilla.org/en-US/docs/Web/CSS/transform

并非所有的rotate3d变换组合都可以用单个rotate3d变换代替。但是，您可以将多个转换组合为一个矩阵转换。我认为这超出了此答案的范围，但是如果您有兴趣，那么也许应该在这里看看： https://www.khanacademy.org/math/linear-algebra/matrix-transformations#composition-of-transformations

如果您想按照建议继续稍后添加转换（也许是交互方式？），则可以从元素中读取当前的转换矩阵，并将其与更多转换组合。

我在您的小提琴中玩了一些JS： https://jsfiddle.net/u5L1dmvx/66/

这是一个示例，虽然不是最优雅，但可以在我的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;

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

Answer 2

此订单对我有用：

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

如何结合CSS旋转？

2 个答案: