CSS3变换旋转嵌套背景图像

我有一个背景，总共存在3个图像。然而，中间背景图像（wrapper2）在视觉上'在'两个背景图像（wrapper1和wrapper2）之间。当我尝试旋转中间图像（wrapper2）时，最上面的图像（wrapper3）也会移动。CSS3变换旋转嵌套背景图像

我如何避免这种情况，因此，只有中间的背景图像（wrapper2）可以旋转，而不是也是另一种（wrapper3）？

<div id="wrapper1"> 
<div id="wrapper2"> 
<div id="wrapper3"> 
<!-- blabla --> 
</div> 
</div> 
</div> 

#wrapper1 { 
     background-image: url("../media/bg1.png"); 
     background-size: 300px 200px; 
     background-repeat: no-repeat; 
} 

#wrapper2 { 
     background-image: url("../media/bg2.png"); 
     background-size: 300px 200px; 
     background-repeat: no-repeat; 
} 

#wrapper3 { 

     background-image: url("../media/bg3.png"); 
     background-size: 300px 200px; 
     background-repeat: no-repeat; 
} 


#wrapper2:hover 
{ 
    animation: TestAnim;   
     animation-iteration-count: infinite;  
    animation-duration: 10s; 
} 

@keyframes TestAnim 
{ 
0% { transform:rotate(0deg); } 
25% { transform:rotate(-4deg); } 
100% { transform:rotate(0deg); } 
} 
}

来源

2013-03-11 juFo

好的，这是不可能的，我工作的方式。我可以定位div（绝对/相对），并让他们兄弟姐妹而不是孩子。

但我选择创建一个我想要的和使用css3动画的所有旋转的精灵图像。

在CSS关键帧动画我每次移动后台位置：

0% { background-position: 0 0; width: 300px; height: 200px; } 
1% { background-position: 0 -200px; width: 300px; height: 200px; } 
...

重要的是你必须定义步启动！

animation-timing-function: step-start;

这一步开始正常工作在Internet Explorer 10 备注：对于旧的浏览器，动画将无法正常工作（CSS3不知道或步骤开始不知道）和你的第一个精灵将会显示出来，所以确保你的第一个精灵是你的初始状态。

为了您的信息：我使用的GIMP创建我的动画，并使用了一种名为CSS WebSprites插件自动生成我的精灵和CSS代码： The GIMP CSS WebSprites plugin

来源

2013-03-12 21:55:04 juFo

CSS3变换旋转嵌套背景图像

回答

相关问题