CSS3 Transition Not Working

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