将一个变换值添加到已经存在于元素上的当前变换中？

Question

将一个变换值添加到已经存在于元素上的当前变换中？

javascriptjquerycsscss-transformswebkit-transform

7

假设我有一个 div，它动态添加了 translateX 和 translateY 值。

<div class="object child0" 
     style="-webkit-transform: translateX(873.5px) translateY(256px); 
            width: 50px; height: 50px;">

我希望将rotateY(20deg)添加到当前的变换中，但是通过element.style.webkitTransform = "rotateX(20deg)"应用它会丢失其他值。

有没有一种方法可以添加rotateY而不失去translateX和translateY的变换？

- nuway

2个回答

1

我知道这个话题有点老了，而且Harry上面已经给出了一个很好的答案。不过，这里还有一个如果你需要再次修改转换的补充：

事实证明，css将transform字符串转换为矩阵，这使得理解如何修改它变得非常困难（这里是完整的文档）。因此，字符串操作解决方案是最简短的。以下是好消息：

您实际上可以“堆叠”多个转换！

试试这个：

let el = document.getElementsByTagName("div")[0];

// first, sync JS transform with current transform style:
const originalMatrix = window.getComputedStyle(el).transform
if(!el.style.transform){
        el.style.transform = originalMatrix 
}

// Then apply as much transforms as you whish
let myTransform = " rotate(45deg)"
el.style.transform += myTransform
el.style.transform += myTransform

这个 div 将旋转 90 度！

为了使其工作，请确保元素之前有一些变换声明（可以在样式表中使用 * {"transform: scale(1)"}）

现在，如果您希望还原所有更改怎么办？

const originalMatrix = window.getComputedStyle(el).transform

// Do some changes....

el.style.setProperty('transform', originalMatrix)

最后，这里有一个可行的示例：

点击 div 进行修改，或者点击 body 将其恢复为原始状态：

window.onload= () => {
    
let el = document.getElementById("myDiv")
const originalMatrix = window.getComputedStyle(el).transform

document.addEventListener('click', e=>{
    
    if(e.target != el){return revert(el)}

    // Sync El transform style
    if(!el.style.transform){
        el.style.transform = originalMatrix 
    }

    // Aplly some more transforms
    el.style.transform = el.style.transform
    let myTransform = " translate(20px, 20px) rotate(45deg)"
    el.style.transform += myTransform
    
})

function revert(el){
        el.style.setProperty('transform', originalMatrix)
}

}

div{
    background:green;
    height:50px;
    width:100px;
    transform:translate(50px, 50px);
    transition:1s;
}

<body>
     Click body to revert him
    <div id="myDiv">ClickMe</div>
</body>

- lior bakalo

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Harry · Accepted Answer

您可以使用+=运算符将 rotateX（20deg）追加到已有的变换中。

el.style.webkitTransform += "rotateX(20deg)";

注意：下面的代码片段中我使用了不同的转换方式以获得视觉效果，但方法是相同的。

window.onload = function() {
  var el = document.getElementsByTagName("div")[0];
  el.style.webkitTransform += "rotateZ(20deg)";
  console.log(el.style.webkitTransform);
  document.getElementById("changeDeg").onclick = changeDeg; //event handler
}

function changeDeg() {
  var el = document.getElementsByTagName("div")[0];
  var re = /(rotateZ)(\(.*(?:deg\)))/g; //regex to match rotateZ(...deg)
  var newDeg = 40;
  if (el.style.webkitTransform.match(re).length != -1) {
    el.style.webkitTransform = el.style.webkitTransform.replace(re, '$1(' + newDeg + 'deg)'); // $1 is first capturing group which is "rotateZ"
  }
  console.log(el.style.webkitTransform);
}

div {
  background: red;
  margin-bottom: 20px;
}

<div class="display-object child0" style="-webkit-transform: translateX(43.5px) translateY(6px); width: 50px; height: 50px;"></div>
<button id="changeDeg">Change Rotation</button>