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

CSS3过渡不起作用

2 个答案: