css3几种常见的翻页特效_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即可。

结果：