CSS - 元素越来越隐藏的同胞

Question

上下文 - 我发现了一个Book设计的codepen。该codepen只能打开书的封面，并显示第1页。我想检查是否可以翻页并显示后续页面（第2页，第3页）。我可以翻页，但翻开的页面被书的封面覆盖。在开发人员工具中，我将翻页的z索引更改为高于书籍封面，但没有更改。

请参阅codepen链接 - http://codepen.io/tusharsaurabh/pen/wgRzdg

期待 - 当我打开网页，打开该页面不应该得到由盖隐藏。

下面的代码片段 -

$(function(){ 
 
\t var book = $('#book'); 
 
\t $('#view-cover').click(function(){ 
 
\t \t $(this).addClass('cur').siblings().removeClass('cur'); 
 
\t \t book.removeClass().addClass('view-cover'); 
 
\t }); 
 
\t $('#view-back').click(function(){ 
 
\t \t $(this).addClass('cur').siblings().removeClass('cur'); 
 
\t \t book.removeClass().addClass('view-back'); 
 
\t }); 
 
\t $('#open-book').click(function(){ 
 
\t \t if (book.attr('class') !='open-book') { 
 
\t \t \t $(this).addClass('cur').siblings().removeClass('cur'); 
 
\t \t \t book.removeClass().addClass('open-book'); 
 
\t \t }else{ 
 
\t \t \t $(this).removeClass('cur'); 
 
\t \t \t $('#view-cover').addClass('cur'); 
 
\t \t \t book.removeClass().addClass('view-cover'); 
 
\t \t } 
 
\t }); 
 
\t $('#view-rotate').click(function(){ 
 
\t \t $(this).addClass('cur').siblings().removeClass('cur'); 
 
\t \t book.removeClass().addClass('view-rotate'); 
 
\t }); 
 
    $('#page-turn').click(function(){ 
 
     $(this).addClass('cur').siblings().removeClass('cur'); 
 
     $('#book-page-turn').addClass('page-turn'); 
 
     $('#book-page-turn').css('z-index','20'); 
 
    }); 
 
    });

.book-font { 
 
     width: 420px; 
 
     height: 560px; 
 
     position: absolute; 
 
     top: 0; 
 
     bottom: 0; 
 
     font-size: 15px; 
 
     text-align: center; 
 
     text-shadow: 0 2px 0 rgba(30, 35, 45, 1); 
 
     box-shadow: inset 3px 0 10px rgba(0, 0, 0, 0.1); 
 
     z-index: 10; 
 
     -webkit-transform-style: preserve-3d; 
 
     -moz-transform-style: preserve-3d; 
 
     -ms-transform-style: preserve-3d; 
 
     -o-transform-style: preserve-3d; 
 
     transform-style: preserve-3d; 
 
     -webkit-transform-origin: 0% 50%; 
 
     -moz-transform-origin: 0% 50%; 
 
     -ms-transform-origin: 0% 50%; 
 
     -o-transform-origin: 0% 50%; 
 
     transform-origin: 0% 50%; 
 
     -webkit-transition-duration: .5s; 
 
     -moz-transition-duration: .5s; 
 
     -ms-transition-duration: .5s; 
 
     -o-transition-duration: .5s; 
 
     transition-duration: .5s; 
 
     -webkit-transform: translate3d(0, 0, 25px); 
 
     -moz-transform: translate3d(0, 0, 25px); 
 
     -ms-transform: translate3d(0, 0, 25px); 
 
     -o-transform: translate3d(0, 0, 25px); 
 
     transform: translate3d(0, 0, 25px); 
 
    } 
 
    .book-page { 
 
     width: 415px; 
 
     height: 550px; 
 
     line-height: 20px; 
 
     position: absolute; 
 
     top: 5px; 
 
     z-index: 9; 
 
     box-shadow: inset 3px 0 10px rgba(0, 0, 0, 0.1); 
 
     -webkit-transform-style: preserve-3d; 
 
     -moz-transform-style: preserve-3d; 
 
     -ms-transform-style: preserve-3d; 
 
     -o-transform-style: preserve-3d; 
 
     transform-style: preserve-3d; 
 
     -webkit-transition-duration: .5s; 
 
     -moz-transform-style: preserve-3d; 
 
     -ms-transform-style: preserve-3d; 
 
     -o-transform-style: preserve-3d; 
 
     transform-style: preserve-3d; 
 
     -webkit-transform: translate3d(0, 0, 24px); 
 
     -moz-transform: translate3d(0, 0, 24px); 
 
     -ms-transform: translate3d(0, 0, 24px); 
 
     -o-transform: translate3d(0, 0, 24px); 
 
     transform: translate3d(0, 0, 24px); 
 
    } 
 

 
    .page { 
 
     height: 500px; 
 
     margin: 30px 40px; 
 
     overflow: hidden; 
 
    } 
 

 
    .book-page h3 { 
 
     font-size: 14px; 
 
     text-align: center; 
 
     margin-bottom: 14px; 
 
    } 
 

 
    .book-page p { 
 
     font-size: 13px; 
 
     margin-bottom: 14px; 
 
    } 
 

 
    .page-turn { 
 
     -webkit-transition-duration: .5s; 
 
     -moz-transition-duration: .5s; 
 
     -ms-transition-duration: .5s; 
 
     -o-transition-duration: .5s; 
 
     transition-duration: .5s; 
 
    
 
     -webkit-transform-origin: 0% 50%; 
 
     -moz-transform-origin: 0% 50%; 
 
     -ms-transform-origin: 0% 50%; 
 
     -o-transform-origin: 0% 50%; 
 
     transform-origin: 0% 50%; 
 
    
 
     -webkit-transform: rotate3d(0, 1, 0, -160deg); 
 
     -moz-transform: rotate3d(0, 1, 0, -160deg); 
 
     -ms-transform: rotate3d(0, 1, 0, -160deg); 
 
     -o-transform: rotate3d(0, 1, 0, -160deg); 
 
     transform: rotate3d(0, 1, 0, -160deg); 
 
    
 
     -webkit-backface-visibility: hidden; 
 
     -moz-backface-visibility: hidden; 
 
     -ms-backface-visibility: hidden; 
 
     -o-backface-visibility: hidden; 
 
     backface-visibility: hidden; 
 
    }

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Document</title> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <div id="book" class="view-cover"> 
 
     <div class="main"> 
 
      <div class="book-font"> 
 
       <div class="book-cover"> 
 
        <h1 class="title">Wuthering Heights</h1> 
 
        <h2 class="author">Emily Bronte</h2> 
 
        <div class="publisher">Oxford University Press, USA</div> 
 
       </div> 
 
       <div class="book-cover-back"></div> 
 
      </div> 
 
      <div class="book-page" id='book-page-turn'> 
 
       <div id="page-1" class="page"> 
 
        <h3>1 Mr Lockwood visits Wuthering Heights</h3> 
 
        .......more code 
 
       </div> 
 
      </div> 
 
     </div> 
 
</body> 
 

 
</html>

Answer 1

我不认为z-index的是这个问题。该页面未因transform和backface-visibility风格上.page-turn

显示删除这些：

/*-webkit-transform: rotate3d(0, 1, 0, -160deg); 
    -moz-transform: rotate3d(0, 1, 0, -160deg); 
    -ms-transform: rotate3d(0, 1, 0, -160deg); 
    -o-transform: rotate3d(0, 1, 0, -160deg); 
    transform: rotate3d(0, 1, 0, -160deg); 

    -webkit-backface-visibility: hidden; 
    -moz-backface-visibility: hidden; 
    -ms-backface-visibility: hidden; 
    -o-backface-visibility: hidden; 
    backface-visibility: hidden;*/ 

然后运行该代码：

CODEPEN

我不知道什么过渡效果或造型，但也许这会帮助你开始..