图像没有旋转

Question

我按照jsFiddle页面http://jsfiddle.net/gionaf/Ugc5g/上的说明在页面http://www.prezzio.net/上旋转图像，但是它不起作用：图像没有旋转。

要清楚，这是要旋转的图像：

这是原始代码：

  .spin { 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="spin" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120"> 

任何想法 ？ 谢谢。

Answer 1

试试看，这是带有所有Vendor prefixes Demo

 img { animation: 2s spin infinite linear; } @keyframes spin { to {transform: rotate(360deg);} } 

 <img src="http://www.prezzio.net/files/theme/spin.png" alt=""> 

Answer 2

罪魁祸首在您的main_style.css行369 。

添加这些行，

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

而且它应该如您所愿旋转。