CSS - 兄弟に隠されている要素

Question

コンテキスト - ブックデザインのコードが見つかりました。コードブックはブックカバーを開いてページ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

Iは、z-indexが問題だとは思いません。私が何を移行わからない

CODEPEN

：コードを

/*-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;*/ 

そして実行します。ページには、これらを削除.page-turn

にtransformとbackface-visibilityスタイルが原因で表示されませんエフェクトやスタイリングが好きかもしれませんが、これはあなたの手助けになるでしょう。