CODEWITHSUNDEEP
htmlcsscss-transitionscss-transforms
Parth
Parth

Reputation: 145

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?

Upvotes: 1

Views: 38

Answers (1)

Abhishek
Abhishek

Reputation: 315

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

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

Upvotes: 2

Related Questions