将变换值添加到元素上已有的当前变换中？
假设我有一个div ，它具有动态添加的translateX和translateY值。
我想将rotateY(20deg)添加到当前变换中，但是通过element.style.webkitTransform = "rotateX(20deg)"应用它会丢失其他值。
有没有办法添加rotateY而不会丢失translateX和translateY转换？
您可以使用+=运算符将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; }