css3翻页时旋转90度为什么还能看见低啊找大神解答

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style>
	.threed-back{
		-webkit-perspective:800;
		perspective-origin:50% 50%;
		overflow:hidden;
	}
	.ground{
		width:400px;
		height:400px;
		margin:20px auto;
		
		-webkit-transform-style:preserve-3d;
		
		position:relative;
		
	}
	.page{
		width:400px;
		height:400px;
		line-height:360px;
		font-size:180px;
		text-align:center;
		
		position:absolute;
		
		background:red;
		color:#fff;
		
		
	}
	#page1{
		-webkit-transform-origin:bottom;
		-webkit-transition:-webkit-transform 1s linear;
	}
	#page2,#page3,#page4{
		-webkit-transform-origin:bottom;
		-webkit-transition:-webkit-transform 1s linear;
		-webkit-transform:rotateX(90deg);
	}
	.controller{
		width:400px;
		margin:100px auto;
		text-align:center;
		background:red;
	}
</style>


<body>
<div class="threed-back">
	<div class="ground">
    	<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>

</div>
<div class="controller">
	<a href="javascript:void(0)" id="next">下一页</a>&nbsp;<a href="javascript:void(0)" id="repage">上一页</a>
</div>
<script>
	var next=document.getElementById("next");
	var re=document.getElementById("repage");
	var cuntent=1;
	next.onclick=function(){
			if(cuntent==4)
			return;
			
			document.getElementById("page"+cuntent).style.webkitTransform="rotateX(-90deg)";
			cuntent++;
			document.getElementById("page"+cuntent).style.webkitTransform="rotateX(0deg)";
	}
	re.onclick=function(){
			if(cuntent==1)
			return;
			
			document.getElementById("page"+cuntent).style.webkitTransform="rotateX(90deg)";
			cuntent--;
			document.getElementById("page"+cuntent).style.webkitTransform="rotateX(0deg)";
	}
</script>
</body>
</html>
qq_林深时见鹿_3
浏览 1578回答 1
1回答

WingMeng
backface-visibility ？
0 1
随时随地看视频慕课网APP