1
Я пытаюсь сделать эффект переворота страницы. для этого мне нужно два перекрытия div. В моей структуре оба divs первоначально сбоку, а второй div дано -webkit-rotateY(180deg). z-index первого div - это 2, а второй div - 1. Таким образом, первый div должен перекрывать второй div.z индекс не работает после использования rotateY
Проблема, хотя индекс z второго div меньше, чем первый div, второй div появляется над первым div. Как я могу это исправить? Я использую сафари 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);
}
Я не знаю о Safari, но с Chromium 25, он работает так, как ожидалось. Оранжевый div выше синего. –
Да, он работает в хроме, даже для меня. –
Вы можете проверить эту ссылку, я думаю, это поможет вам решить вашу проблему. http://w3schools.com/cssref/css3_pr_transform.asp –