javascript - CSS - 元素被 sibling 隐藏

Question

上下文 - 我找到了书籍设计的代码笔。 codepen只能打开书的封面并显示第1页。我想检查是否可以翻页并显示后续页面(第 2 页、第 3 页)。我可以翻页，但翻过的页面被书皮盖住了。在开发人员工具中，我将翻页的 z-index 更改为高于书籍封面但没有变化。

请查看代码笔链接 - http://codepen.io/tusharsaurabh/pen/wgRzdg

期望 - 当我翻页时，翻过的页面不应该被封面遮住。

下面是代码片段-

    $(function(){
	var book = $('#book');
	$('#view-cover').click(function(){
		$(this).addClass('cur').siblings().removeClass('cur');
		book.removeClass().addClass('view-cover');
	});
	$('#view-back').click(function(){
		$(this).addClass('cur').siblings().removeClass('cur');
		book.removeClass().addClass('view-back');
	});
	$('#open-book').click(function(){
		if ( book.attr('class') !='open-book') {
			$(this).addClass('cur').siblings().removeClass('cur');
			book.removeClass().addClass('open-book');
		}else{
			$(this).removeClass('cur');
			$('#view-cover').addClass('cur');
			book.removeClass().addClass('view-cover');
		}
	});
	$('#view-rotate').click(function(){
		$(this).addClass('cur').siblings().removeClass('cur');
		book.removeClass().addClass('view-rotate');
	});
    $('#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 是问题所在。由于 .page-turn

上的 transform 和 backface-visibility 样式，页面未显示

删除这些:

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

我不确定你想要什么样的过渡效果或样式，但也许这会帮助你开始......