unknownCoder unknownCoder - 4 months ago 7
HTML Question

Why is the transition effect working only on one property?



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





Here, the transition property is defined for all properties. However, when the mouse is hovered over the image, only the second transform property (the one defining scaleX() function) is changed. The first transform property remains unchanged. Why is the first one not changing? How can I change both of them at the same time?

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

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