CSS之3D翻转效果

最新推荐文章于 2024-03-03 20:00:31 发布

程序员库里

最新推荐文章于 2024-03-03 20:00:31 发布

阅读量472

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/chaofei_liang/article/details/78009758

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		#a{
			-webkit-perspective:800;
			-webkit-perspective-origin:50% 50%;
			

			overflow: hidden;
		}
		#pagegroup{
			width: 400px;
			height: 400px;
			margin: 0 auto;
			-webkit-transform-style:preserve-3d;
			position: relative;
		}
		.page{
			width: 360px;
			height: 360px;
			padding: 20px;
			background: #000;
			color: #fff;
			font-weight: bold;
			font-size: 360px;
			line-height: 360px;
			text-align: center;
			position: absolute;
		}
		#page1{
			-webkit-transform-origin:bottom;
			-webkit-transition:-webkit-transform 1s linear;
		}
		#page2,#page3,#page4,#page5,#page6{
			-webkit-transform-origin:bottom;
			-webkit-transition:-webkit-transform 1s linear;
			-webkit-transform:rotateX(90deg);
		}

	</style>
</head>
<body>
<div id="a">
	<div id="pagegroup">
		<div class="page" id="page1">1</div>
		<div class="page" id="page2">2</div>
		<div class="page" id="page3">3</div>
		<div class="page" id="page4">4</div>
		<div class="page" id="page5">5</div>
		<div class="page" id="page6">6</div>
	</div>
</div>

<div id="op">
	<a href="javascript:next()">next </a>
	<a href="javascript:perv()">perv</a>
</div>

<script type="text/javascript">
	var curIndex=1;
	function next(){
		if(curIndex==6){
			return;
		}
		var curPage=document.getElementById('page'+curIndex);
		curPage.style.webkitTransform="rotateX(-90deg)";
		curIndex++;
		var nextPage=document.getElementById('page'+curIndex);
		nextPage.style.webkitTransform="rotateX(0deg)";

	}
	function perv(){
		if(curIndex==1){
			return;
		}
		var curPage=document.getElementById('page'+curIndex);
		curPage.style.webkitTransform="rotateX(90deg)";
		curIndex--;
		var nextPage=document.getElementById('page'+curIndex);
		nextPage.style.webkitTransform="rotateX(0deg)";
	}
</script>
</body>
</html>