Flipbook没有任何插件

Question

我试图使我自己的Flipbook技术没有使用任何插件总之试图创造它，直到某一点。我无法弄清楚如何在正在进行的页面的左侧显示背景的50％以及即将到来的页面的剩余50％的背景。

$(document).ready(function() { 
 
\t var degrees = 0; 
 
    $('.book-cover').click(function rotateMe(e) { 
 

 
    degrees += 180; 
 

 
    $('.book-cover').css({ 
 
     'transform': 'rotateY(-' + degrees + 'deg)', 
 
     '-ms-transform': 'rotateY(-' + degrees + 'deg)', 
 
     '-moz-transform': 'rotateY(-' + degrees + 'deg)', 
 
     '-webkit-transform': 'rotateY(-' + degrees + 'deg)', 
 
     '-o-transform': 'rotateY(-' + degrees + 'deg)', 
 
    }); 
 

 
    }) 
 
});

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.book-bg { 
 
    position: relative; 
 
    width: 200px; 
 
    height: 324px; 
 
    margin: 100px auto; 
 
    background: url("https://i.pinimg.com/236x/33/c9/7d/33c97d1ac95ebb016b79008dd4d1b51a--baby-flower-wedding-flower-girls.jpg") no-repeat; 
 
    background-size: cover; 
 
    transform-style: preserve-3d; 
 
    perspective: 1000px; 
 
    backface-visibility: hidden; 
 
} 
 

 
.book-cover { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-size: cover; 
 
    background: url("https://nurturestore.co.uk/wp-content/uploads/2016/11/tummy-time-ideas1.png") no-repeat; 
 
    transform-origin: 0, 100%; 
 
    transition: all 2.0s ease; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="book-bg"> 
 
    <div class="book-cover"></div> 
 
</div>

Answer 1

我已经解决了上按钮的单击事件这种情况下，它是工作的罚款。

$(document).ready(function() { 
 
\t \t \t var i = 0; 
 
\t \t \t $('.flipitem').each(function() { 
 
\t \t \t \t if (i == 0) { 
 
\t \t \t \t \t $(this).addClass('visible'); 
 
\t \t \t \t } 
 
\t \t \t \t else { 
 
\t \t \t \t \t $(this).addClass('hidden'); 
 
\t \t \t \t } 
 
\t \t \t \t i++; 
 
\t \t \t }); 
 
\t \t \t $('.page').each(function() { 
 
\t \t \t \t $(this).addClass('hidden'); 
 
\t \t \t }); 
 
\t \t }); 
 
\t \t function flip() { 
 
\t \t \t var btn = $('#btn'); 
 
\t \t \t btn.addClass('hidden'); 
 
\t \t \t var active = $('.flipitem.visible'); 
 
\t \t \t var hidden = $('.flipitem.hidden'); 
 
\t \t \t var left = $('.page.left'); 
 
\t \t \t var right = $('.page.right'); 
 
\t \t \t var front = $('.front'); 
 
\t \t \t var back = $('.back'); 
 
\t \t \t front.removeClass('flip'); 
 
\t \t \t back.removeClass('flip'); 
 
\t \t \t var activeimage = active.html(); 
 
\t \t \t var hiddenimage = hidden.html(); 
 
\t \t \t left.html(activeimage); 
 
\t \t \t front.html(activeimage); 
 
\t \t \t right.html(hiddenimage); 
 
\t \t \t back.html(hiddenimage); 
 
\t \t \t $('.page').each(function() { 
 
\t \t \t \t $(this).removeClass('hidden'); 
 
\t \t \t }); 
 

 
\t \t \t setTimeout(function() { 
 
\t \t \t \t front.addClass('flip'); 
 
\t \t \t \t back.addClass('flip'); 
 
\t \t \t \t hidden.removeClass('hidden'); 
 
\t \t \t \t hidden.addClass('visible'); 
 
\t \t \t \t active.removeClass('visible'); 
 
\t \t \t \t active.addClass('hidden'); 
 
\t \t \t \t setTimeout(function() { 
 
\t \t \t \t \t $('.page').each(function() { 
 
\t \t \t \t \t \t $(this).addClass('hidden'); 
 
\t \t \t \t \t }); 
 
\t \t \t \t \t btn.removeClass('hidden'); 
 
\t \t \t \t }, 500); 
 
\t \t \t }, 10); 
 
\t \t }

.flip3D { 
 
\t \t \t width: 200px; 
 
\t \t \t height: 500px; 
 
\t \t \t margin: 10px; 
 
\t \t \t float: left; 
 
\t \t } 
 

 
\t \t .front { 
 
\t \t \t position: absolute; 
 
\t \t \t transform: perspective(600px) rotateY(0deg); 
 
\t \t \t /* background:#FC0; width:240px; height:200px; border-radius: 7px; */ 
 
\t \t \t backface-visibility: hidden; 
 
\t \t \t transition: transform 0.5s linear 0s; 
 
\t \t } 
 

 
\t \t .back { 
 
\t \t \t position: absolute; 
 
\t \t \t transform: perspective(600px) rotateY(180deg); 
 
\t \t \t /* \t background: #80BFFF; width:240px; height:200px; border-radius: 7px; */ 
 
\t \t \t backface-visibility: hidden; 
 
\t \t \t transition: transform 0.5s linear 0s; 
 
\t \t } 
 

 
\t \t .flip.front { 
 
\t \t \t transform: perspective(600px) rotateY(-180deg); 
 
\t \t } 
 

 
\t \t .flip.back { 
 
\t \t \t transform: perspective(600px) rotateY(0deg); 
 
\t \t } 
 

 
\t \t .right { 
 
\t \t \t z-index: 1; 
 
\t \t \t position: absolute; 
 
\t \t } 
 

 
\t \t .left { 
 
\t \t \t z-index: 2; 
 
\t \t \t position: absolute; 
 
\t \t } 
 

 
\t \t .center { 
 
\t \t \t z-index: 3; 
 
\t \t \t position: absolute; 
 
\t \t } 
 

 
\t \t .left img { 
 
\t \t \t clip-path: inset(0 50% 0 0); 
 
\t \t } 
 

 
\t \t .right img { 
 
\t \t \t clip-path: inset(0 0 0 50%); 
 
\t \t } 
 

 
\t \t .front img { 
 
\t \t \t clip-path: inset(0 0 0 50%); 
 
\t \t } 
 

 
\t \t .back img { 
 
\t \t \t clip-path: inset(0 50% 0 0); 
 
\t \t } 
 

 
\t \t .hidden { 
 
\t \t \t display: none; 
 
\t \t } 
 

 
\t \t .visible { 
 
\t \t \t display: block; 
 
\t \t }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
\t <div class="flip3D"> 
 
\t \t <div class="page left"></div> 
 
\t \t <div class="page center"> 
 
\t \t \t <div class="front"></div> 
 
\t \t \t <div class="back"></div> 
 
\t \t </div> 
 
\t \t <div class="page right"></div> 
 
\t \t <div class="flipitem"> 
 
\t \t \t <img src="https://nurturestore.co.uk/wp-content/uploads/2016/11/tummy-time-ideas1.png"> 
 
\t \t </div> 
 
\t \t <div class="flipitem"> 
 
\t \t \t <img src="https://i.pinimg.com/236x/33/c9/7d/33c97d1ac95ebb016b79008dd4d1b51a--baby-flower-wedding-flower-girls.jpg"> 
 
\t \t </div> 
 
\t </div> 
 
\t <button onclick="flip()" id="btn">Next</button>