Question

我正在尝试翻页效果。为此我需要两个div重叠。在我的结构中，两个div最初都在旁边，第二个div被赋予-webkit-rotateY(180deg)。第一个div的z-index是2，第二个div是1.所以第一个div应该重叠第二个div。

问题是，即使第二个div的z索引小于第一个div，第二个div也会出现在第一个div之上。我怎样才能解决这个问题？我正在使用safari 5.1.7。

HTML -

<body>
<div id="BookMainDiv" class="BookMainDiv">
<div id="CoverPage" class="CoverPage">
</div>
<div id="LastPage" class="LastPage">
</div>          
</div>
</body>

CSS -

    .CoverPage{
position:absolute;
height:80%;
width:35%;
top:12%;
left:50%;
overflow:hidden;
z-index:2;
-webkit-transform-origin : 0% 0%;  
-webkit-transition:transform  1s ease-in-out;
background:orange;
}

.LastPage{
position:absolute;
height:80%;
width:35%;
top:12%;
left:15%;
overflow:hidden;
z-index:1;
background:blue;
-webkit-transform-origin:100% 100%;
-webkit-transform:rotateY(180deg);

}

Answer 1

#bookmaindiv位置相对吗？如果没有尝试。

使用rotateY后z index无法正常工作

1 个答案: