紡紗圖標工作在codepen中，但不在瀏覽器中

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