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.