Flipbook没有任何插件
问题描述：
我试图使我自己的Flipbook技术没有使用任何插件总之试图创造它，直到某一点。我无法弄清楚如何在正在进行的页面的左侧显示背景的50％以及即将到来的页面的剩余50％的背景。 Flipbook没有任何插件
$(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>
答
我已经解决了上按钮的单击事件这种情况下，它是工作的罚款。
$(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>