Andreas Lambadarios Andreas Lambadarios - 1 month ago 9
CSS Question

How Can You Combine Rotate and Grow On Hover Into One CSS Animation With a Fixed Axis?

I want both animations to execute on hover and then reset back after the cursor moves away like the rotate animation I have below. So I just need to combine the grow animation with a keyframe or ? Any Suggestions? Thanks.



#rotating_image {
position:absolute;
left:70px;
top:100px;

-webkit-transition: -webkit-transform .8s ease-in-out;
-ms-transition: -ms-transform .8s ease-in-out;
transition: transform .8s ease-in-out;

}

#rotating_image:hover {
transform:rotate(360deg);
-ms-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
}

<img src="http://i.imgur.com/ZKEqcWm.jpg" id = "rotating_image">




Answer

Try looking into scale(), also note that you can use multiple transformations.

#rotating_image {
  position: absolute;
  left: 70px;
  top: 100px;
  -webkit-transition: -webkit-transform .8s ease-in-out;
  -ms-transition: -ms-transform .8s ease-in-out;
  transition: transform .8s ease-in-out;
}
#rotating_image:hover {
  transform: rotate(360deg) scale(2);
  -ms-transform: rotate(360deg) scale(2);
  -webkit-transform: rotate(360deg) scale(2);
}
<img src="http://i.imgur.com/ZKEqcWm.jpg" id="rotating_image">

Comments