CSS 2个旋转物体

Question

我有很奇怪的问题..

得赶紧两个对象：

<div id="menu"> 
     <a href="#"><img src="images/nagrody.png"></a> 
     <a href="#"><img src="images/zwyciezcy.png"></a> 
     <a href="#"><img src="images/zasady.png"></a> 
</div> 

随着风格：

#menu { 
float:right; 
margin:20px 10px; 
width: 160px; 
-webkit-transform:rotate(3deg); 
-moz-transform:rotate(3deg); 
-o-transform:rotate(3deg); 
} 

#menu img{ 
    -webkit-transition-duration: 0.5s; 
    -moz-transition-duration: 0.5s; 
    -o-transition-duration: 0.5s; 
    transition-duration: 0.5s; 

    -webkit-transform:scale(0.95,0.95); 
    -moz-transform:scale(0.95,0.95); 
    -o-transform:scale(0.95,0.95); 

    overflow:hidden; 
} 

#menu img:hover{ 

    -webkit-transform:scale(1,1); 
    -moz-transform:scale(1,1); 
    -o-transform:scale(1,1); 
} 

和第2对象：

<div id="znajomi"> 
     <a href="#"><img src="images/zapros.png"></a> 
     <p>BRAKUJE CI JESZCZE <span id="fr">3 ZNAJOMYCH</span></p> 
</div> 

风格：

#znajomi { 
    padding:420px 20px; 
    -webkit-transform:rotate(-4deg); 
    -moz-transform:rotate(-4deg); 
    -o-transform:rotate(-4deg); 
} 

#znajomi p { 
    font-family:DIN, Arial, Helvetica, sans-serif; 
    font-size:13px; 
    color:#fff; 
    position:relative; 
    top:-20px; 
    left:20px; 
} 

#fr { 
    font-family: Arista, Arial, Helvetica, sans-serif; 
    font-size:21px; 
    color:#c2dc2f; 
    text-shadow:rgba(113,0,0,0.75) 2px 2px; 
} 

而且我的问题是：如果 我从菜单中工作#znajomi

-webkit-transform:rotate(-4deg); 
-moz-transform:rotate(-4deg); 
-o-transform:rotate(-4deg); 

哈弗删除，但如果这个代码是plaste - 这是行不通的。

有什么建议吗？

Answer 1

#znajomi -element覆盖了#menu。你必须使用z-index或其他定位。没有完整的网站布局，我不能给你一个最好的变化的例子。

它有帮助，如果您从菜单中删除float:right。您可以添加一个margin-left以获得与以前相同的结果。