html - CSS3 过渡不工作

Question

我正在尝试为我的社交媒体按钮进行转换。我应用了有效的过渡效果，但它不起作用:(

谁能看出我做错了什么？这是我的 fiddle :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);
}