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

Question

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 element.style.webkitTransform = "rotateX(20deg)" loses the other values.

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

Harry · Accepted Answer · 2015-05-03T06:20:25.233

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>

this works, thanks. but if i want to change rotation again, it would keep appending rotateZ(someValue). I want to be able to add transforms freely and modify their values too. is there no way to be able to safely add transformation or modify its value without having to check if this type of value already exists? — nuway, May 03 '15 at 05:48
You can't define two separate `transform` properties in CSS (or inline styles) because the latter one would replace the earlier one. The only way to achieve either using JS or jQuery is to get the existing string and append (or remove existing values as required). — Harry, May 03 '15 at 05:50
@nuway: I know you would probably be able to figure out the regex by yourself but I have added a sample to the snippet for your reference. — Harry, May 03 '15 at 06:21

lior bakalo · Answer 2 · 2022-04-27T19:29:40.197

I know this topic is a bit old, and there is a great answer above by Harry. Though here is an addition in case you need to modify the transform again:

It turns out that that css converts the transform string into a matrix, which makes it extremely hard to understand how to modify (Here is a full documentary). So string manipulation solutions are the shortest. Here are the good news:

You actually can "stack" multiple transformations!

Try this:

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

The div will rotate 90 degrees!

for that to work make sure that the element have some transform declatation beforehand (one can use * {"transform: scale(1)"} in the style sheet)

Now What if you whish to revert all your changes?

const originalMatrix = window.getComputedStyle(el).transform

// Do some changes....

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

Finally, here is a working example:

Click on the div to modify it, or on the body to revert it to original:

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?

2 Answers2

Try this:

Now What if you whish to revert all your changes?

Finally, here is a working example:

Linked