没有任何插件的翻书

Question

我试图制作我自己的翻书技术而不使用任何插件无论如何都试图创建它直到某些点。我无法弄清楚如何在前页的左侧显示50％的背景以及即将到来的页面的剩余50％的背景。

＆＃13;

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

ID

＆＃13;

＆＃13;

＆＃13;

Answer 1

我已经在按钮点击事件中解决了这个问题，它运行正常。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

		.hidden {
			display: none;
		}

		.visible {
			display: block;
		}

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