将变换值添加到元素上已有的当前变换中？ [英] Add a transform value to the current transforms that are already on the element?

问题描述

假设我有一个 div ，其中包含 translateX 和 translateY 动态添加的值。

Let's say I have a div that had translateX and translateY values added dynamically.

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

我想添加 rotateY（20deg）到当前转换，但通过
element.style.webkitTransform =rotateX（20deg）应用它丢失其他值。

I want to add rotateY(20deg) to the current transforms, but applying it via element.style.webkitTransform = "rotateX(20deg)" loses the other values.

有没有办法添加 rotateY ，而不会丢失 translateX 和 translateY transforms？

Is there a way to add the rotateY without losing the translateX and translateY transforms?

推荐答案

运算符将 rotateX（20deg）附加到已经存在的转换中。

You could use the += operator to append the rotateX(20deg) to the already existing transformation.

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

注意：我在下面的代码段中使用了不同的转换视觉效果，但方法是一样的。

Note: I have used a different transformation in the below snippet for the visual effect but method is the same.

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>

这篇关于将变换值添加到元素上已有的当前变换中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！