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

似乎连续使用

obj.style.transform

的两种情况只会导致执行第一条语句。请参阅下面的代码。一个完整的例子正在进行中

---

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

对同一元素应用多个变换时，应将它们作为空格分隔的值添加到同一属性中，如下所示。否则，它们将被覆盖（只有

rotateY

将被应用，因为它是最新的）

我在原始代码段和修改后的版本中添加了

object.style.transform

的

警报

，我们可以看到原始代码段始终只输出

rotateY

，而更改后的代码段同时输出

rotateX（）

和

rotateY（）

|

---

@MikeResoli:很高兴我能帮忙：）

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

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

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