Question

我有徽标，我希望在悬停时不断旋转。怎么做到这一点？它只能用css3或我们需要javascript帮助吗？还有一件事，当那些标志没有发布时，它就会在没有完成旋转的情况下停下来。我们如何告诉css完成旋转，即使徽标已被打开。

我目前的CSS是：

header .logo:hover img{ 
    -webkit-transition: all 1.2s ease-in;
    -moz-transition: all 1.2s ease-in;
    -o-transition: all 1.2s ease-in;
    -ms-transition: all 1.2s ease-in;
    -moz-transform: rotateY(720deg);
    -webkit-transform: rotateY(720deg);
    transform: rotateY(720deg); 
    filter: progid : DXImageTransform.Microsoft.BasicImage ( rotation = 2 )
}

Answer 1

我认为你需要使用关键帧动画。

演示（webkit）：jsFiddle

代码：

.one:hover {
    -webkit-animation: all 1.2s linear infinite;


}

@-webkit-keyframes all
{

0%   {-webkit-transform: rotateY(0deg);}
100% {-webkit-transform: rotateY(720deg);}

}

Answer 2

尝试使用css3动画：

-webkit-animation: slide 10s linear infinite;
-moz-animation: slide 10s linear infinite;
-ms-animation: slide 10s linear infinite;
-o-animation: slide 10s linear infinite;
animation: slide 10s linear infinite;

如何连续使图像旋转

2 个答案: