CSS - Element wird von Geschwistern verdeckt

Question

Kontext - Ich habe einen CodePen eines Buchdesigns gefunden. Der Codepen kann nur den Buchdeckel öffnen und Seite-1 anzeigen. Ich wollte überprüfen, ob ich die Seite umdrehen und die nächste Seite anzeigen kann (Seite 2, Seite 3). Ich konnte die Seite wechseln, aber die umgedrehte Seite wird vom Buchumschlag bedeckt. In Entwicklertools habe ich den Z-Index der gedrehten Seite so geändert, dass er höher ist als der Buchumschlag, aber keine Änderung.

Bitte beachten Sie die codepen Link - http://codepen.io/tusharsaurabh/pen/wgRzdg

Erwartung - Wenn ich umblättern, sollte die einge Seite nicht durch die Abdeckung verdeckt erhalten.

Unten ist der Code-Schnipsel -

$(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

Ich glaube nicht, dass die Z-Index ist das Problem. Die Seite wird nicht angezeigt wegen der transform und backface-visibility Arten .page-turn

entfernen diese:

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

Und dann den Code ausführen:

CODEPEN

Ich bin mir nicht sicher, was Übergang Effekte oder Styling, die Sie wollen, aber vielleicht hilft Ihnen das dabei.