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

第二个目标：

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

从菜单工作中悬停，但如果此代码是抹灰 - 它不起作用。

有什么建议吗？

Answer 1

#znajomi - 元素覆盖#menu。你必须使用z-index或其他定位。没有完整的网站布局我无法给你一个最好的改变的例子。

如果从菜单中删除float:right，

会有所帮助。您可以添加margin-left以获得与之前相同的结果。

CSS旋转2个对象

1 个答案: