Warum funktioniert der Übergangseffekt nur auf einer Eigenschaft?

Question

img { 
 
    width: 40%; 
 
    height: 30%; 
 
    padding: 3%; 
 
    transition: all 2s; 
 
} 
 
img:hover { 
 
    -webkit-transform: rotate(360deg); 
 
    -webkit-transform: scaleX(2); 
 
    -webkit-transition: all 1s; 
 
}

<img src="http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg">

Hier wird der Übergang Eigenschaft für alle Eigenschaften definiert. Wenn die Maus über das Bild bewegt wird, wird jedoch nur die zweite Transformationseigenschaft (die die Funktion scaleX() definiert) geändert. Die erste Transformationseigenschaft bleibt unverändert. Warum ändert sich der erste nicht? Wie kann ich beide gleichzeitig ändern?

Answer 1

img { 
    width: 40%; 
    height: 30%; 
    padding: 3%; 
    transition: all 2s; 
} 
img:hover { 
-webkit-transform: rotate(360deg) scaleX(2); 
} 

FIDDLE: https://jsfiddle.net/c6z4wy5x/