图像没有旋转

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

试试这个，Demo所有Vendor prefixes

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

它应该像你期望的那样旋转。