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

Using multiple .style.transform on same element

本文关键字：style transform 同一个 元素      更新时间：2023-09-26

似乎连续使用两种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位置的文本区域中读取行，将值从弧度转换为度，然后使用这些值为我的三维对象设置动画。

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

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

我在原始片段和修改版本中都添加了object.style.transform的alert，我们可以看到原始片段总是只输出rotateY，而更改后的片段同时输出rotateX()和rotateY()。

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

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

然后字符串化所得矩阵及其在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>

相关文章：