CSS3过渡不起作用

Question

我正在尝试转换我的社交媒体按钮。 我已经应用了有效的过渡效果，但效果不佳:(

谁能看到我在做什么错？ 这是我的小提琴： 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>

Answer 1

您在这里： 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);
}

Answer 2

您使用的是哪种浏览器，在Chrome中对我来说似乎工作正常。

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

如果您像这样更改声明，它将起作用。

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