将变换值添加到元素上已有的当前变换？

Question

假设我有一个 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)" 丢失其他值。

有没有办法在不丢失 translateX 和 translateY 转换的情况下添加 rotateY？

Answer 1

您可以使用 += 运算符将 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, '(' + newDeg + 'deg)'); //  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>

Answer 2

我知道这个话题有点老了，Harry 上面有一个很好的回答。虽然这里有一个补充以防您需要再次修改转换:

事实证明，css 转换 transform string into a matrix, which makes it extremely hard to understand how to modify (Here 是一部完整的纪录片）。所以字符串操作解决方案是最短的。好消息是：

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

试试这个：

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度！

要确保该元素事先有一些变换声明（可以在样式 sheet 中使用 * {"transform: scale(1)"}）

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

const originalMatrix = window.getComputedStyle(el).transform

// Do some changes....

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

最后，这是一个工作示例：

点击 div 进行修改，或点击正文恢复原状：

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>

将变换值添加到元素上已有的当前变换？

Add a transform value to the current transforms that are already on the element?

javascript

css

jquery

css-transforms

webkit-transform

试试这个：

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

最后，这是一个工作示例：