Спиннинг-иконки работают в кодефе, но не в браузере

Question

Я играю с кодом для встраивания значков социальных сетей, которые вращаются при наведении. Я корректирую их для проекта, и он отлично работает в this pen. Но когда я копирую код в скобки, всякий раз, когда страница загружается, значки не появляются, пока вы не наведете над квадратом. У кого-нибудь есть идея, где я ошибаюсь?

HTML

<section> 
    <ul id='services'> 
    <li> 
     <div class='entypo-facebook'></div> 
    </li> 
    <li> 
     <div class='entypo-twitter'></div> 
    </li> 
    <li> 
     <div class='entypo-gplus'></div> 
    </li> 
    <li> 
     <div class='entypo-linkedin'></div> 
    </li> 
    </ul> 
</section> 

CSS

@import url(http://weloveiconfonts.com/api/?family=entypo); 
/* entypo */ 
[class*="entypo-"]:before { 
    font-family: 'entypo', sans-serif; 
} 

html, body { 
    margin: 0; 
    background-color: #ECF0F1; 
} 

section #services { 
    text-align: center; 
    transform: translatez(0); 
} 


section #services li { 
    width: 40px; 
    height: 40px; 
    display: inline-block; 
    margin: 20px; 
    list-style: none; 
} 

section #services li div { 
    width: 40px; 
    height: 40px; 
    color: #ECF0F1; 
    font-size: 1.2em; 
    text-align: center; 
    line-height: 40px; 
    background-color: #cccccc; 
    transition: all 1s ease; 
} 

section #services li div:hover { 
    transform: rotate(360deg); 
    -ms-transform: rotate(360deg); /* IE 9 */ 
    -webkit-transform: rotate(360deg); /* Safari and Chrome */ 
    border-radius: 100px; 
    -webkit-border-radius: 100px; 
    -moz-border-radius: 100px; 
    background-color: #303030; 
} 

Answer 1

Вы должны установить префикс, как -webkit--moz- и так далее в вашей transform собственности.

SEE DEMO

section #services li div:hover { 
    -moz-transform: rotate(360deg); 
    -webkit-transform: rotate(360deg); 
    transform: rotate(360deg); 
    border-radius: 100px; 
}