使用rotateY後z索引不工作

我正在嘗試做翻頁效果。爲此我需要兩個div重疊。在我的結構中，兩個div本來是並排的，第二個div給出-webkit-rotateY(180deg)。第一個div的z-index是2，第二個div是1.所以第一個div應該與第二個div重疊。使用rotateY後z索引不工作

問題是，即使第二個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);

}

來源

2013-11-27 Aditya Ponkshe

我不知道關於Safari，但與鉻25，它按預期工作。橙色的div在藍色之上。 –

是的，它適用於鉻，即使對我來說。 –

你可以查看這個鏈接，我認爲它會幫助你解決你的問題。 http://w3schools.com/cssref/css3_pr_transform.asp –

相對#bookmaindiv位置？如果不嘗試。

來源

2014-02-04 21:29:13

使用rotateY後z索引不工作

回答

相關問題