为什么过渡效果只对一个 属性 有效？

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">

此处，为所有属性定义了转换 属性。但是，当鼠标悬停在图像上时，只有第二个变换 属性（定义 scaleX() 函数的那个​​）发生变化。第一个变换 属性 保持不变。为什么第一个没有改变？如何同时更改它们？

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/