Question

我正在尝试使图像始终旋转，并且在悬停时按比例缩放。首先我尝试使用Firefox Developer Edition，效果很好但是一旦鼠标移出，图像就会回到原来的位置并突然回到旋转位置。在Chrome中没有工作，在IE上它有很多错误。我的目标是图像始终旋转并在悬停时进行缩放而不改变位置（在Firefox上它转到第一个位置），在＆＃34; mouseout＆＃34;只需移除刻度，始终保持旋转。

＆＃13;

#homeMim img {
	position: absolute;
	height: 200px;
	-webkit-animation: spin 400s linear infinite;
	-moz-animation: spin 400s linear infinite;
	animation: spin 400s linear infinite;	
    
    -webkit-transition: 0.5s ease-in-out;
	-moz-transition: 0.5s ease-in-out;
	transition: 0.5s ease-in-out;
}

#homeMim img:hover { 
    -webkit-transform: scale(1.5);
	-moz-transform: scale(1.5);
    transform: scale(1.5);  
}

 @-moz-keyframes spin {
    100% {
        -moz-transform: rotate(360deg);
    }
}
@-webkit-keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
    }
}
@keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
        transform:rotate(360deg);
    }
}

＆＃13;

<a href="#" >
  <div id="homeMim">
      <img src="http://static.tumblr.com/b83a716deb49703dec398591011d8cdd/mnd7iyt/6sPneymmi/tumblr_static_91qahxvbeggs4g0gs8wwosw08.png" /></div>
  </a>

＆＃13;

http://jsfiddle.net/phrhm1qv/1/

Answer 1

您只能在一个元素上一次应用一个转换规则。如果你想旋转和缩放一个元素，我建议旋转父元素并缩放元素本身。

#homeMim  {
    position: absolute;
    height: 200px;
    -webkit-animation: spin 40s linear infinite;
    -moz-animation: spin 40s linear infinite;
    animation: spin 40s linear infinite;        
}

#homeMim img { 
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}

#homeMim img:hover { 
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    transform: scale(1.5); 
}

 @-moz-keyframes spin {
    100% {
        -moz-transform: rotate(360deg);
    }
}
@-webkit-keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
    }
}
@keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
        transform:rotate(360deg);
    }
}

CSS3：过渡悬停和动画旋转错误

1 个答案: