CSS3: How to rotate and scale an img at the same time?

Question

I\'m very confused. Why can\'t I use scale and rotate at the same time? I\'ve tried this, but it does not work:

.rotate-img{
    -webkit-transform:scale(2,2);
           


        

Answer 1

You can scale & rotate at the same time, but you HAVE to do it on the same line, otherwise you overwrite the prievius value with the new value.

let htmlElement = document.getElementById("rotate-img");
let scaleX = -0.3;
let scaleY =  0.2;
let angle  =  45 ;

// NOTICE!! THE BACK-TICKS, not regular quotes. Will decode variables inside before printing.

// Code for Safari
htmlElement.style.WebkitTransform = `scale( ${scaleX}, ${scaleY} ) rotate( ${angle}deg )`; 

// Code for IE9
htmlElement.style.msTransform = `scale( ${scaleX}, ${scaleY} ) rotate( ${angle}deg )`; 

// Standard syntax
htmlElement.style.transform = `scale( ${scaleX}, ${scaleY} ) rotate( ${angle}deg )`; 

Also notice that any already existing style on that element will be overwritten, unless you save that style into a (string-)variable first & add (append or concatenate) the new styles to that saved variable & then add the whole variable back onto the html-element.