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變換旋轉嵌套背景圖像

回答

相關問題