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

将多个转换应用于同一元素时，应将它们作为 space 分隔值添加到相同的属性，如下所示。否则，它们会被覆盖（只有 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

Answer 2

您可以使用 DOMMatrix 来 build/chain 您的 CSS transform。

然后 stringify 生成的矩阵及其在 DOMMatrixReadOnly.toString() 中的构建。其中 returns 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>

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

Using multiple .style.transform on same element

html

javascript

css

css-transforms