旋转动画

<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); 
        }
    }
}

当前回答

这里是一个演示。正确的动画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">

关于代码的一些注意事项:

你在.image规则中嵌套了关键帧，这是不正确的 Float:left对绝对定位的元素不起作用看看caniuse: IE10不需要-ms-前缀

2013-05-27 11:00:11

其他回答

要实现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浏览器上工作。你可以在这里检查更新后的小提琴

2013-05-27 10:40:22

这个应该能帮到你

下面的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();

地点: •t:当前时间，

•b:起始值，

•c: change In value，

•d:持续时间，

•x:未使用

无缓动(线性缓动): 函数(x, t, b, c, d){返回b+(t/d)*c;｝

2013-11-01 07:12:43

试试简单的方法

.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">↻</span></button>

2020-04-06 16:03:18

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

.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); } }

2014-11-07 05:06:26

另一个使用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);
    }
}

2021-03-09 11:23:54

推荐文章

最新文章

标签