没有任何插件的动画书

Question

我正在尝试在不使用任何插件的情况下制作自己的翻书技术，无论如何我一直尝试创建它直到某个时候。我无法弄清楚如何将 50% 的背景显示在当前页面的左侧，而剩余 50% 的背景则显示在即将到来的页面中。

$(document).ready(function() {
	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 () {
			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>