javascript - 在同一元素上使用多个 .style.transform

Question

似乎通过连续使用 obj.style.transform 的两种情况只会导致第一个语句被执行。请看下面的代码。一个完整的例子在 CodePen .

function animateObject(x, y, z){
    object = document.getElementsByClassName('cub-1')[0];

    object.style.transform = "rotateX(" + x + "deg)";
    object.style.transform = "rotateY(" + y + "deg)";
    alert("")
}

在完整示例中，我从包含对象的 x、y 和 z 位置的文本区域读取行，将值从弧度转换为度，然后使用这些值为我的 3d 对象设置动画。

Answer 1

当对同一个元素应用多个转换时，它们应该作为空格分隔值添加到同一个属性，如下所示。否则，它们会被覆盖(只有 rotateY 会被应用，因为它是最新的)。

object.style.transform = "rotateX(" + x + "deg)";
object.style.transform += "rotateY(" + y + "deg)";

我在原始代码段和修改后的版本中都添加了 object.style.transform 的 alert，我们可以看到原始代码总是只输出rotateY 而更改后的版本同时输出 rotateX() 和 rotateY()。

Original Code with Alerts added | Modified Code with Alerts added