Question

我正在网站上工作，想要将徽标旋转360度。网站网址为http://flipped.in/JSJ/

我使用的示例代码是：

＆＃13;

.rotate{
    -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;
 
    }  
 
.rotate:hover  
{
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
}

＆＃13;

现在，我尝试更换课程＆＃39;旋转＆＃39;我的徽标有一个，但它不起作用。有人可以帮我添加正确的课程吗？

Answer 1

代码在Chrome和Firefox上正常运行。它不适用于IE，因为IE实现（在现代版本中）所涉及属性的标准名称，并且代码在其标准名称下缺少transform属性的设置。添加它使代码适用于现代浏览器。

<style>
.rotate{
    -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;
     }  
 .rotate:hover  
{
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
    transform:rotate(360deg);         /* This was missing. */
} 
</style>
<img class=rotate src=
"http://flipped.in/JSJ/wp-content/uploads/2014/12/JSJ-Logo.png"
 alt="Jump Start Jonny">

如何使用CSS将徽标旋转360度？

1 个答案: