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

Question

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

9.5k views Asked by nuway At 03 May 2015 at 05:25

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?

Original Q&A

There are 2 answers

lior bakalo On 26 April 2022 at 09:56

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>

**Harry** · Accepted Answer · 2015-05-03T05:32:02+00:00

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>

TechQA.

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

There are 2 answers

Try this:

Now What if you whish to revert all your changes?

Finally, here is a working example:

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in CSS

Related Questions in CSS-TRANSFORMS

Related Questions in WEBKIT-TRANSFORM

Popular Questions

Popular Tags

Trending Questions