1
페이지 뒤집기 효과를 시도하고 있습니다. 이것을 위해 두 개의 겹쳐진 div이 필요합니다. 내 구조에서 두 divs는 원래 옆에 있고 -webkit-rotateY(180deg) 주어진 두 번째. 첫 번째 div의 z-index은 2이고 두 번째 div는 1입니다. 따라서 첫 번째 div는 두 번째 div와 겹쳐 야합니다.rotateY를 사용한 후에 z 색인이 작동하지 않습니다.
두 번째 div의 z 인덱스가 첫 번째 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에서는 예상대로 작동합니다. 주황색 부분은 파란색 부분 위에 있습니다. –
네, 저도 크롬에서 작동합니다. –
이 링크를 클릭하면 문제를 해결하는 데 도움이 될 것입니다. http://w3schools.com/cssref/css3_pr_transform.asp –