How to keep old values of transform property in JS?

I need to add a new option to transform property of my element but I also need to keep old values. In other words, my element has transform: rotate(27.36deg); but I also need to add scale(1.1) to it with JS but I don’t know how to do that since whenever I do section.style.transform = "scale(1.1)" the rotation is gone

trasform takes at once all the scale, rotate etc… if you give a new value to transform the transformations you don’t mention get back to default value of no transformation

It works the same with JS as it does with CSS. You have to add all the transform functions.

.box {
  height: 100px;
  width: 100px;
  background: red;
  transform: rotate(45deg);
}

.box:hover {
  /* keep rotation on hover scale */
  transform: rotate(45deg) scale(1.5);
}
const box = document.querySelector('.box')
const btn = document.querySelector('#btn')

btn.addEventListener('click', () => {
  // keep rotation on button click scale
  box.style.transform = 'rotate(45deg) scale(1.5)'
})

MDN transform: Values

<transform-function>

One or more of the CSS transform functions to be applied. The transform functions are multiplied in order from left to right, meaning that composite transforms are effectively applied in order from right to left.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.