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 { }