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.

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

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

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



You could use the += operator to append the rotateX(20deg) to the already existing transformation. += "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]; += "rotateZ(20deg)";
  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 ( != -1) { =, '$1(' + newDeg + 'deg)'); // $1 is first capturing group which is "rotateZ"
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>


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.