在同一个元素上使用多个 .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)";

我添加了一个alert的的object.style.transform既原始片段和修改后的版本，我们可以看到原来一直只输出rotateY而改变一个既输出rotateX()和rotateY()在一起。

原始代码与警报添加 | 添加了已修改的警报代码

Answer 2

您可以使用DOMMatrix来构建/链接您的 CSS transform 。

然后使用DOMMatrixReadOnly.toString()构建对结果DOMMatrixReadOnly.toString()字符串化。 它返回 CSS 就绪transform语法。

 window.onload = () => { const getStyle = id => document.getElementById(id).style; // Rotate in plane getStyle('Ⅰ').transform = new DOMMatrix('rotateZ(45deg)'); // Rotate from [1,1] vector (diagonal) (same as Ⅰ) getStyle('Ⅱ').transform = new DOMMatrix().rotateFromVectorSelf(1, 1); // Rotate matrix on Z axis. (same as Ⅰ & Ⅱ) getStyle('Ⅲ').transform = new DOMMatrix().rotateAxisAngleSelf(0, 0, 1, 45); // Rotate matrix on X axis. Then rotate matrix on Y axis. getStyle('Ⅳ').transform = new DOMMatrix('rotateX(45deg) rotateY(45deg)'); // Rotate matrix on X axis. Then rotate matrix on Y axis (same as Ⅳ) getStyle('Ⅴ').transform = new DOMMatrix('rotateX(45deg)').multiply(new DOMMatrix('rotateY(45deg)')); // Rotate matrix on Y axis. Then rotate matrix on X axis. getStyle('Ⅵ').transform = new DOMMatrix('rotateY(45deg)').multiply(new DOMMatrix('rotateX(45deg)')); // Rotate matrix on Y/X axis. (same as Ⅵ) getStyle('Ⅶ').transform = new DOMMatrix().rotateSelf(45, 45); };

 .element { transition: transform 1s; padding: 5px; opacity: .7; } .element::after { content: attr(id); } #Ⅰ { background: red; transition-delay: 0s;} #Ⅱ { background: green; transition-delay: 1s; } #Ⅲ { background: blue; transition-delay: 2s; } #Ⅳ { background: orange; transition-delay: 3s; } #Ⅴ { background: purple; transition-delay: 4s; } #Ⅵ { background: pink; transition-delay: 5s; } #Ⅶ { background: coral; transition-delay: 6s;} .frame { position: relative; margin: 20px; display: grid; grid-auto-flow: column; grid-auto-columns: 80px; grid-auto-rows: 80px; border: 1px solid; }

 <div class="frame"> <div class="element" id="Ⅰ"></div> <div class="element" id="Ⅱ"></div> <div class="element" id="Ⅲ"></div> <div class="element" id="Ⅳ"></div> <div class="element" id="Ⅴ"></div> <div class="element" id="Ⅵ"></div> <div class="element" id="Ⅶ"></div> </div>