css3幾種常見的翻頁特效 萬次閱讀

翻頁特效
線上demo：https://my.weblf.cn/xly/demo/book_hand_back2.html

html:

<div class="book preserve-3d">
			<div class="now_page point">
				<div class="book-page">
					<p>第三頁</p>




				</div>
			</div>
	
			<div class="now_page point">
				<div class="book-page">
					<p>第二頁</p>
				</div>
			</div>
			
			<div class="now_page point">
				<div class="book-page ">
					<p>第一頁</p>
				</div>
			</div>
			
			<!封面>
			<div class="point now_page">
				<div class="book-page first-page">
					<p>封面</p>
				</div>
			</div>
		</div>

css:

.book{
		height: 10rem;
		width: 40%;
		background: #FFF;
		position: absolute;
		right:10%;
		top:4rem;
		transform: rotateX(30deg);
		-webkit-transform: rotateX(30deg);
		-ms-transform: rotateX(30deg);
		-o-transform: rotateX(30deg);
	}
	/*每頁的公共樣式*/
	.book-page {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height:10rem;
		border: 1px solid #1976D2;
		text-align: center;
		background-color: #fff;
	}
	.book-page p{
		font-size: 1.2rem;
		margin-top: 2rem;
		color: #ff6300;
		backface-visibility:hidden;
		-webkit-backface-visibility:hidden;
	}
	/*首頁樣式*/
	.first-page{
		background-color: #1976D2;
	}
	
	/*動畫部分*/
	/*I'm the home page動畫*/
	.flip-animation-start {
		animation: flipBook1 3s forwards;
		-moz-animation: flipBook1 3s forwards; /* Firefox */
		-webkit-animation: flipBook1 3s forwards; /* Safari and Chrome */
		-o-animation: flipBook1 3s forwards; /* Opera */
	}
	.flip-animation-end {
		animation: flipBook2 3s forwards;
		-moz-animation: flipBook2 3s forwards; /* Firefox */
		-webkit-animation: flipBook2 3s forwards; /* Safari and Chrome */
		-o-animation: flipBook2 3s forwards; /* Opera */
	}
	@keyframes flipBook1 {
		0% {
			-webkit-transform: rotateY(0deg);
			-ms-transform: rotateY(0deg);
			-o-transform: rotateY(0deg);
			transform: rotateY(0deg);
		}
		100% {
			-webkit-transform: rotateY(-160deg);
			-ms-transform: rotateY(-160deg);
			-o-transform: rotateY(-160deg);
			transform: rotateY(-160deg);
		}
	}
 /*關閉書頁*/
	@keyframes flipBook2 {
		0% {
			-webkit-transform: rotateY(-160deg);
			-ms-transform: rotateY(-160deg);
			-o-transform: rotateY(-160deg);
			transform: rotateY(-160deg);
		}
		100% {
			-webkit-transform: rotateY(0deg);
			-ms-transform: rotateY(0deg);
			-o-transform: rotateY(0deg);
			transform: rotateY(0deg);
		}
	}

js:

$('.now_page').click(function(){
			if($(this).hasClass('flip-animation-start')){
				$(this).removeClass('flip-animation-start').addClass('flip-animation-end');
			}else{
				$(this).removeClass('flip-animation-end').addClass('flip-animation-start');
			}
		})

這樣寫出來的翻頁效果在正反面都可看見，如果想要隱藏反面可見，需要用到css3屬性：backface-visibility:hidden;這個屬性可以在元素在反面是隱藏。

反面隱藏

加入backface-visibility屬性,注意：此條屬性要搭配父級擁有屬性transform-style: preserve-3d才可生效，必要時可以給所有父級添加。

.book-page p{
		font-size: 1.2rem;
		margin-top: 2rem;
		color: #ff6300;
		backface-visibility:hidden;
		-webkit-backface-visibility:hidden;
	}

 效果：

雙面展示不同內容

如果想在同一頁的正反面展示不同的內容，此時將上一條的backface-visibility屬性靈活運用一下即可。即先將背面的內容倒轉，這樣背面的內容在正面時隱藏，在反面時顯示。

<!封面>
			<div class="point now_page preserve-3d">
				<div class="book-page first-page preserve-3d">
					<p>封面</p>
				</div>
				<div class="back_book_page preserve-3d">
					<p>反面</p>
				</div>
			</div>

css:

/*反面*/
	.back_book_page{width:100%;background:#ff6300;height:10rem;position:absolute;top:0;left:0;transform:rotateY(180deg);}
	.back_book_page>p{color:white;font-size:1.2rem;text-align:center;margin-top:2rem;}

效果：

注意：如果反面皆是一樣，則可以使用上面寫法，如果不一樣，則會出現封面在上的情況，那是因為元素雖然翻轉，但是層級關系仍未改變，所以當動畫結束時封面會在上(我也是後來才發現這個問題)。錯誤展示如下：
此時如果想展示雙面效果，需要在翻頁後設置層級關系。

var active_z=0;
		$('.now_page').click(function(){
			console.log($(this));
			if($(this).hasClass('flip-animation-start')){
				$(this).removeClass('flip-animation-start').addClass('flip-animation-end').css('z-index',0);
				active_z;
			}else{
				$(this).removeClass('flip-animation-end').addClass('flip-animation-start').css('z-index',active_z);
				active_z++;
			}
		})

為活動的頁面設置z-index即可。
結果：