CSS3旋转animation

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

不能让这个animation图像工作，它应该做一个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); } } } 

Answer 1

这里是一个演示 。 正确的animationCSS：

 .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"> 

Answer 2

我有一个旋转的图像使用与你一样的东西：

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

Answer 3

为了实现360度旋转，下面是工作解决scheme 。

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

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

PS：添加一个-webkit-扩展名，以便在chrome和其他webkit浏览器上工作。 你可以检查更新的小提琴为webkit 这里

Answer 4

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

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

Answer 5

这里应该可以帮到你

下面的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：未使用

无缓动（线性缓动）：函数（x，t，b，c，d）{返回b +（t / d）* c; }