css3绘制3d翻页效果

最新推荐文章于 2024-07-23 11:50:44 发布

Yalishizhude

最新推荐文章于 2024-07-23 11:50:44 发布

阅读量3.6k

点赞数

分类专栏： css3 文章标签： css3 3d图像

本文链接：https://blog.csdn.net/Yalishizhude/article/details/43911017

版权

css3 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

核心内容：

1.css3的transition属性来制作简单的动画

transition属性可以为指定的css属性添加动画效果，这个动画用到的是transform属性

transition: property duration timing-function delay;

复杂的动画效果可以用keyframes来绘制

2.css3绘制3d图形旋转效果

transform属性一看名字就知道是用来改变图形形状的，包括位移translate，旋转rotate，缩放scale。所谓的3d效果一般是由图形旋转拼凑而成的，所以这里用到了transform中的rotate值，绕着y轴旋转，定义旋转轴transform-origin: right center;绘制3d图像前要在外层设置一个3d的景深和样式perspective: 800;transform-style: preserve-3d;

源代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>transition绘制翻页效果</title>
	<style>
		.btn{
			margin:40px;	
		}
		#book{
			background-color: black;
			margin: 40px;
			width: 400px;
			height: 200px;
			padding: 0;
			perspective: 800;
			transform-style: preserve-3d;
			-webkit-perspective: 800;
			-webkit-transform-style: -webkit-preserve-3d;
		}
		#page1{
			position: absolute;
			width: 200px;
			height: 200px;
			background-color: grey;
			transform-origin: right center;
			transition: transform 1s linear;
			-webkit-transition: transform 1s linear;
			-webkit-transform-origin: right center;
		}
		#page2, #page3, #page4{
			position: absolute;
			width: 200px;
			height: 200px;
			background-color: grey;
			transition: transform 1s linear;
			-webkit-transition: transform 1s linear;
			transform-origin: right center;
			-webkit-transform-origin: right center;
			transform: rotateY(180deg);
			-webkit-transform: rotateY(180deg);
		}

		#left{
			float: left;
			background-color: black;
			margin-left: 40px;
			width: 200px;
			height: 200px;
			padding: 0;
			overflow: hidden;
			perspective: 800;
			transform-style: preserve-3d;
			-webkit-perspective: 800;
			-webkit-transform-style: -webkit-preserve-3d;
		}
		#right{
			float: left;
			background-color: black;
			width: 200px;
			height: 200px;
			padding: 0;
			overflow: hidden;
			perspective: 800;
			transform-style: preserve-3d;
			-webkit-perspective: 800;
			-webkit-transform-style: -webkit-preserve-3d;
		}
		#pagel1,#pagel2,#pagel3,#pagel4{
			position: absolute;
			width: 158px;
			height: 158px;
			background-color: grey;
			padding: 20px;
			transform-origin: right center;
			transition: transform 1s linear;
			-webkit-transition: transform 1s linear;
			-webkit-transform-origin: right center;
			border: 1px solid red;
		}
		#pagel2,#pagel3,#pagel4{
			transform: rotateY(180deg);
			-webkit-transform: rotateY(180deg);
		}
		#pager1,#pager2,#pager3,#pager4{
			position: absolute;
			width: 158px;
			height: 158px;
			background-color: grey;
			padding: 20px;
			transition: transform 1s linear;
			-webkit-transition: transform 1s linear;
			transform-origin: left center;
			-webkit-transform-origin: left center;
			border: 1px solid red;
		}
		#pager1{
			z-index: -10;
		}
		#pager2{
			z-index: -20;
		}
		#pager3{
			z-index: -30;
		}
		#pager4{
			z-index: -40;
		}
	</style>
</head>
<body>
	<div id="book">
		<div id="page1">1</div>
		<div id="page2">2</div>
		<div id="page3">3</div>
		<div id="page4">4</div>
	</div>
	<div class="btn">
		<a href="javascript:prev()">上一页</a>  <a href="javascript:next()">下一页</a>
	</div>

	<div id="left">
		<div id="pagel1">第1页</div>
		<div id="pagel2">第3页</div>
		<div id="pagel3">第5页</div>
		<div id="pagel4">第7页</div>
	</div>
	<div id="right">
		<div id="pager1">第2页</div>
		<div id="pager2">第4页</div>
		<div id="pager3">第6页</div>
		<div id="pager4">第8页</div>
	</div>
	<div style="clear:both;"></div>
	<div class="btn">
		<a href="javascript:prev2()">上一页</a>  <a href="javascript:next2()">下一页</a>
	</div>
	<script>
		var curIndex = 1;
		function prev(){
			if(1==curIndex) return;
			var lPage = document.getElementById("page"+curIndex);
			var llPage = document.getElementById("page"+(curIndex-1));
			var rPage = document.getElementById("page"+(curIndex+1));
			if(llPage)llPage.style.zIndex = 100;
			if(rPage)rPage.style.zIndex = 0;
			lPage.style.transform = "rotateY(180deg)";
			lPage.style.webkitTransform = "rotateY(180deg)";
			curIndex--;
		}
		function next(){
			if(4==curIndex) return;
			curIndex++;
			var lPage = document.getElementById("page"+curIndex);
			var rPage = document.getElementById("page"+(curIndex+1));
			if(rPage)rPage.style.zIndex = 100;
			lPage.style.transform = "rotateY(0deg)";
			lPage.style.webkitTransform = "rotateY(0deg)";
		}
		var curPage = 1;
		function prev2(){
			if(1===curPage) return;
			//左边翻页
			var lPage = document.getElementById("pagel" + curPage);
			lPage.style.transform = "rotateY(180deg)";
			lPage.style.webkitTransform = "rotateY(180deg)";
			//右边翻页
			var rPage = document.getElementById("pager" + (curPage-1));
			rPage.style.transform = "rotateY(0deg)";
			rPage.style.webkitTransform = "rotateY(0deg)";
			curPage--;
		}
		function next2(){
			if(4===curPage) return;
			//左边翻页
			var lPage = document.getElementById("pagel" + (curPage+1));
			lPage.style.transform = "rotateY(0deg)";
			lPage.style.webkitTransform = "rotateY(0deg)";
			//右边翻页
			var rPage = document.getElementById("pager" + curPage);
			rPage.style.transform = "rotateY(-180deg)";
			rPage.style.webkitTransform = "rotateY(-180deg)";
			curPage++;
		}
	</script>
</body>
</html>

这里绘制了两个图形，第一个是绕中轴进行的翻页效果，这样有个问题，就是翻页后文字内容全部反了，第二个就是为了解决这个问题，做了两个3d翻页效果拼凑起来形成一个翻书的效果