Element transform scale maintained after transform rotation occurrs

I have an element I am zooming in (one button) and then rotating (another button)

When I zoom in on the element the scale gets updated, then when I go to rotate element the scale is not kept from the zoom (but it really is, I can see the value is maintained browser debug) but it zooms back out to the initial scale when rotate is clicked.

let spin = 0;
let zoom = 1;

$('#SpinRight').click(function(){

  //I know for a fact scale keeps value here, but zooms back out to original size when I     //click spin
  
  spin += 25;
  $('#element').css({'transform' : 'rotate(' + spin + 'deg'});
})

$('#Magnify').click(function(){
  zoom += 0.1;
  $('#element').css({'transform' : 'scale(' + zoom + ')'});
})

Answer

transform rules don’t stack, so if you do:

transform: rotate(45deg);
transform: scale(0.5);

The scale transform replaces the rotate rule, it doesn’t add to it. If you want both you need to specify them both in a single rule:

transform: rotate(45deg) scale(0.5);

You could keep track of the rotation and scale in css properties and then have a rule that applies them both. (Or just apply them the way you’re already doing it, but do both for each update.)

const demo = document.querySelector('.demo');
let rotate = 0;
let scale = 1;

document.querySelector('.rotate').addEventListener('click', () => {
  demo.style.setProperty('--rotate', `${rotate += 10}deg`);
});

document.querySelector('.scale').addEventListener('click', () => {
  demo.style.setProperty('--scale', scale += 0.1);
});
.demo {
  --rotate: 0;
  background: skyblue;
  width: 100px;
  height: 100px;
  transform: rotate(var(--rotate, 0)) scale(var(--scale, 1));
}

button {
  position: relative; /* just so the buttons stay on top */
}
<div class="demo"></div>

<button class="rotate">Rotate</button>
<button class="scale">Scale</button>

Leave a Reply

Your email address will not be published. Required fields are marked *