CSS3旋转动画

老丝卡卡西西里 2020.03.26

我有一个旋转的图像，使用与您相同的内容：

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

小小猴子 2020.03.26

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

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

LEYTom西门 2020.03.26

为了实现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

泡芙 2020.03.26

在这里这应该对你有帮助

下面的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：begInnIng值，

•c：价值变动，

•d：持续时间，

•x：未使用

不放松（线性放松）：function（x，t，b，c，d）{return b +（t / d）* c; }

阿飞乐 2020.03.26

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