CSS 旋转 2 个对象答案

【问题标题】：CSS Rotate 2 objectsCSS 旋转 2 个对象
【发布时间】：2012-06-04 14:37:18
【问题描述】：

我有一个很奇怪的问题..

有两个对象：

<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);
}

第二个对象：

<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 - 它不起作用。

有什么建议吗？

【问题讨论】：

请把它放到jsfiddle.net 中，这样会更容易......摆弄它......

标签： css transform rotation

【解决方案1】：

#znajomi 元素覆盖了#menu。您必须使用 z-index 或其他定位。如果没有完整的站点布局，我无法为您提供最佳更改的示例。

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

【讨论】：