CSS3旋转动画

<img class="image" src="" alt="" width="120" height="120">

无法让这个动画图像工作，它应该做一个360度旋转。

我想下面的 CSS 有些问题，因为它一直保持不动。

.image {
float: left;
margin: 0 auto;
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
margin-top: -60px;
margin-left: -60px;


-webkit-animation-name: spin;
-webkit-animation-duration: 4000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;


-moz-animation-name: spin;
-moz-animation-duration: 4000ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;


-ms-animation-name: spin;
-ms-animation-duration: 4000ms;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;


animation-name: spin;
animation-duration: 4000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;


@-ms-keyframes spin {
from {
-ms-transform: rotate(0deg);
} to {
-ms-transform: rotate(360deg);
}
}
@-moz-keyframes spin {
from {
-moz-transform: rotate(0deg);
} to {
-moz-transform: rotate(360deg);
}
}
@-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
} to {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
from {
transform: rotate(0deg);
} to {
transform: rotate(360deg);
}
}
}
966854 次浏览
小开

要实现360度旋转，这里是工作方案。

HTML:

<img class="image" src="your-image.png">

CSS:

.image {
overflow: hidden;
transition-duration: 0.8s;
transition-property: transform;
}
.image:hover {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}

你必须悬停在图像上，你会得到360度旋转效果。

PS:添加一个-webkit-扩展，它可以在chrome和其他webkit浏览器上工作。你可以为webkit HERE检查更新后的fiddle

小开
最佳答案

这是一个demo。正确的动画CSS:

.image {
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
margin:-60px 0 0 -60px;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
@-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);
}
}
<img class="image" src="http://i.stack.imgur.com/pC1Tv.jpg" alt="" width="120" height="120">

Some notes on your code:

  1. You've nested the keyframes inside the .image rule, and that's incorrect
  2. float:left won't work on absolutely positioned elements
  3. Have a look at caniuse: IE10 doesn't need the -ms- prefix
小开

我有一个旋转图像，使用和你一样的东西:

.knoop1 img{
position:absolute;
width:114px;
height:114px;
top:400px;
margin:0 auto;
margin-left:-195px;
z-index:0;


-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;


-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;


overflow:hidden;
}


.knoop1:hover img{
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
}
小开

这个应该能帮到你

下面的jsfiddle链接将帮助您了解如何旋转图像。我用同样的一个旋转时钟的表盘。

http://jsfiddle.net/xw89p/

var rotation = function (){
$("#image").rotate({
angle:0,
animateTo:360,
callback: rotation,
easing: function (x,t,b,c,d){
return c*(t/d)+b;
}
});
}
rotation();
< p >地点: •t:当前时间，

•b:起始值，

•c: change In value，

•d:持续时间，

•x:未使用

无缓和(线性缓和): 函数(x, t, b, c, d){返回b+(t/d)*c;} < / p >

小开

如果你想翻转图像，你可以使用它。

.image{
width: 100%;
-webkit-animation:spin 3s linear infinite;
-moz-animation:spin 3s linear infinite;
animation:spin 3s linear infinite;
}
@-moz-keyframes spin { 50% { -moz-transform: rotateY(90deg); } }
@-webkit-keyframes spin { 50% { -webkit-transform: rotateY(90deg); } }
@keyframes spin { 50% { -webkit-transform: rotateY(90deg); transform:rotateY(90deg); } }
小开

试试简单的方法


.btn-circle span {
top: 0;
   

position: absolute;
font-size: 18px;
text-align: center;
text-decoration: none;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}


.btn-circle span :hover {
color :silver;
}




/* rotate 360 key for refresh btn */
@-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); } } 
 <button type="button" class="btn btn-success btn-circle" ><span class="glyphicon">&#x21bb;</span></button>

小开

另一个使用css3在后台旋转对象的方法，请看下面的css3代码:

.floating-ball-model-3 > span {
animation-name: floating-ball-model-3;
animation-duration: 7s;
animation-iteration-count: infinite;
animation-timing-function: linear;
-webkit-animation-name: floating-ball-model-3;
-webkit-animation-duration: 7s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: floating-ball-model-3;
-moz-animation-duration: 7s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: floating-ball-model-3;
-ms-animation-duration: 7s;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
-o-animation-name: floating-ball-model-3;
-o-animation-duration: 7s;
-o-animation-iteration-count: infinite;
-o-animation-timing-function: linear;
}




@keyframes floating-ball-model-3 {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

提交答案