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