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

我不知道什麼過渡效果或造型，但也許這會幫助你開始..