Question

＆＃13;

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

＆＃13;

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

＆＃13;

此处，为所有属性定义了过渡属性。但是，当鼠标悬停在图像上时，只会更改第二个转换属性（定义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/

为什么过渡效应仅适用于一个属性？

1 个答案: