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)";

我已将alert object.style.transform添加到原始代码段和修改后的版本中，我们可以看到原始代码始终仅输出rotateY而后者更改输出同时rotateX()和rotateY()。

Original Code with Alerts added | Modified Code with Alerts added

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

1 个答案: