JavaScript&Css3实现翻书特效

JavaScript&Css3实现翻书特效

HTML

<div class="book">
			<div id="page1">
				<div class="page-back"></div>
				<div class="page-front">HTML5</div>
			</div>
			<div id="page2">
				<div class="page-back"></div>
				<div class="page-front">CSS3</div>
			</div>
			<div id="page3">
				<div class="page-back"></div>
				<div class="page-front">JavaScript</div>
			</div>
			<div id="page4">
				<div class="page-back"></div>
				<div class="page-front">End</div>
			</div>
		</div>

css

			*{
				margin: 0;
				padding: 0;
			}
			
			body {
				background-color: #666;
			}
			
			.book {
				width: 200px;
				height: 300px;
				margin: 150px auto;
				background-color: rgba(255,0,0,.5);
				position: relative;
				transform-style: preserve-3d;
				/*近大远小的效果*/
				perspective: 1200px;
			}
			#page1, #page2, #page3, #page4 {
				transform-origin: left;
				transform-style: preserve-3d;
				position: absolute;
				left: 0;
				top: 0;
				width: 200px;
				height: 300px;
			}
			#page1 {
				z-index: 4;
			}
			#page2 {
				z-index: 3;
			}
			#page3 {
				z-index: 2;
			}
			#page4 {
				z-index: 1;
			}
			.page-front, .page-back {
				width: 200px;
				height: 300px;
				position: absolute;
				box-sizing: border-box;
			}
			.page-front {
				background-color: greenyellow;
				text-align: center;
				font: bold 36px/300px arial;
				border: 10px solid #fff;
				backface-visibility: hidden;
			}
			.page-back {
				background-color: #f0f0f0;
				border: 10px solid #fff;
			}

js

var currentIndex = 0;
			var pagesDome = document.querySelectorAll("[id^='page']");
			var pageNum = pagesDome.length;
			var bookDom = document.querySelector(".book");
			bookDom.onclick = function(ev){
				currentIndex++;
				if(currentIndex > pagesDome.length-1){
					for(var i = 0;i < pageNum;i++){
						pagesDome[i].style.transform = "rotateY(0deg)";
					}
				}else{
					//单击翻页
					pagesDome[currentIndex].style.transition = "2s";
					pagesDome[currentIndex].style.transform = "rotateY(-145deg)";
				}
			}