Add A Transform Value To The Current Transforms That Are Already On The Element?

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

Copy

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
}

functionchangeDeg() {
  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;
}

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

Share