动画故障

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测试了你的网页