html - 如何将悬停时的旋转和增长结合到一个具有固定轴的 CSS 动画中？

Question

我希望两个动画都在悬停时执行，然后在光标移开后重置回来，就像我下面的旋转动画一样。所以我只需要将成长动画与关键帧或？有什么建议么？谢谢。

#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 1

尝试查看 scale() , 另请注意，您可以使用多个 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">