動畫故障

Question

隨着我的圖像，我有一些故障。我所有的一切都是在工作，然後我把一個班級變成了五個不同的班級，所以我可以單獨更改他們的大小，而不會影響他們。唯一的問題是，現在我這樣做了，圖片不旋轉，只是文本除了第一個。此外，當我調整圖像的大小時，我將要做的事情不會一直旋轉。起初我認爲這是一個動畫問題，但我不太確定，因爲它設置爲180度旋轉，這應該發生，無論大小。我的網站是這裏http://spencedesign.netau.net/singapore-gallery.html和我想佈局我的照片的方式是

Answer 1

因爲你指定只爲.icon1元素中的圖標動畫中的錯誤造成的，你還重複了其他所有的圖標：

li:hover .icon1, li:hover .icon2, li:hover .icon3, li:hover .icon4, li:hover .icon5, li:hover .label { 

    -webkit-transform:translateZ(-32px) rotateY(180deg); 

    -webkit-animation-duration:0.33s; 
    -webkit-animation-name:rotateOut; 
    -webkit-animation-timing-function:linear; 
    -webkit-animation-fill-mode:forwards; 

} 

這是一個相當尷尬的CSS結構，但並很難十個分量，我想你應該給基於一個通用類的每個元素和另一個類的每個元素在CSS動畫規則單獨挑它您的需求，如下所示：

/* CSS */ 
.icon-bar li:hover .icon, .icon-bar li:hover .icon-label { 

    your animation code here 
} 

<!-- HTML --> 

<ul class="icon-bar"> 
<li> 
    <span class="icon first-icon"></span> 
    <span class="label">item 1</span> 
</li> 
<li> 
    <span class="icon second-icon"></span> 
    <span class="label">item 2</span> 
</li> 
<li> 
    <span class="icon third-icon"></span> 
    <span class="label">item 3</span> 
</li> 
<li> 
    <span class="icon fourth-icon"></span> 
    <span class="label">item 4</span> 
</li> 
<li> 
    <span class="icon fifth-icon"></span> 
    <span class="label">item 5</span> 
</li> 
</ul> 

---

此外，當我調整圖片的大小是相當大的，我會怎麼做它不旋轉的所有道路。起初我認爲這是一個動畫問題，但我不太確定，因爲它設置爲180度旋轉，這應該發生，無論大小。

不幸的是，我看不到任何問題的第二部分，是否有插件插件附加或什麼？我已經用Chrome Canary和FireFox測試了你的網頁