CSS3转换不起作用

我正在尝试为我的社交媒体按钮进行转换。我已经申请一个有效的过渡效果，但它不会工作:(CSS3转换不起作用

任何人都可以看到我在做什么错在这里是我的小提琴：http://jsfiddle.net/Zu3sP/

CSS：

.social-spin { 
    -webkit-transition: all 0.3s ease 0s; 
    -moz-transition: all 0.3s ease 0s; 
    -o-transition: all 0.3s ease 0s; 
    transition: all 0.3s ease 0s; 
} 

.social-spin:hover { 
    -webkit-transform: rotate(360deg); 
    -moz-transform: rotate(360deg); 
    -o-transform: rotate(360deg); 
    transform: rotate(360deg); 
}

HTML：

<button class="btn-social blue-btn" type="button"> 
    <img class="social-spin" src="http://i.imgur.com/sz3UXCt.png"> 
</button>

来源

2013-07-21 user2598957

它在我的浏览器中正常工作。我正在使用谷歌浏览器。 –

我怎样才能让它在Firefox中工作你知道吗？ – user2598957

给你：http://jsfiddle.net/Zu3sP/2/
只要给一个初始旋转：

.social-spin{ 
    -webkit-transition: all 0.3s ease 0s; 
    -moz-transition: all 0.3s ease 0s; 
    -o-transition: all 0.3s ease 0s; 
    transition: all 0.3s ease 0s; 
    -webkit-transform: rotate(0deg); 
    -moz-transform: rotate(0deg); 
    -o-transform: rotate(0deg); 
    transform: rotate(0deg); 
}

来源

2013-07-21 09:58:10 Cherniv

在Firefox中不适合我吗？ –

是的，即时通讯在Firefox也似乎没有工作，我会检查铬 – user2598957

@ user2598957固定！我更新了我的答案中的链接，看看它 – Cherniv

您使用的是什么浏览器，它似乎在Chrome中正常工作。

在Firefox中悬停似乎只适用于锚点而不是图像。

如果您更改声明就像它的工作。

.btn-social:hover .social-spin { }

来源

2013-07-21 09:58:54 j00lz

CSS3转换不起作用

回答

相关问题