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

【问题标题】：Using multiple .style.transform on same element在同一个元素上使用多个 .style.transform
【发布时间】：2016-03-29 17:23:23
【问题描述】：

似乎通过连续使用两个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 对象进行动画处理。

【问题讨论】：

标签： javascript html css css-transforms

【解决方案1】：

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

然后 stringify 生成的矩阵及其在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>

【讨论】：

【解决方案2】：

当对同一个元素应用多个变换时，它们应该作为空格分隔的值添加到同一个属性中，如下所示。否则，它们将被覆盖（仅应用 rotateY，因为它是最新的）。

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

我在原始 sn-p 和修改后的版本中添加了 object.style.transform 的 alert，我们可以看到原始版本始终只输出 rotateY 而更改后的版本同时输出 rotateX()和rotateY() 在一起。

Original Code with Alerts added | Modified Code with Alerts added

【讨论】：

@MikeResoli：很高兴我能帮上忙 :)