麻烦大神看看这个为什么没有3D效果

首页课程实战体系课手记专栏慕课教程

麻烦大神看看这个为什么没有3D效果

<!DOCTYPE html>

<html>

<head>

#box{perspective: 500;

perspective-origin: 50% 50%;

transform-style: preserve-3d;

width: 500px;

height: 500px;}

.page{text-align: center;

font-size: 100px;

height: 300px;

width: 300px;

line-height: 300px;

margin: 100px;

position: absolute;

transition: transform 2s;

background: #ccc;

transform-origin: bottom;}

#page6,#page2,#page3,#page4,#page5{

transform: rotateX(90deg);

}

</style>

</head>

<body>

</div>

</div>

var next=document.getElementById('next');

var curIndex=1;

next.onclick=function(){

if (curIndex==6) {return;}

var curPage=document.getElementById('page'+curIndex);

curPage.style.transform="rotateX(-90deg)";

curIndex++;

var curPage=document.getElementById('page'+curIndex);

curPage.style.transform="rotateX(0)";

}

pre.onclick=function(){

if (curIndex==1) {return;}

var curPage=document.getElementById('page'+curIndex);

curPage.style.transform="rotateX(-90deg)";

curIndex--;

var curPage=document.getElementById('page'+curIndex);

curPage.style.transform="rotateX(0)";

}

</script>

</body>

</html>

慕哥6327088

浏览 1251回答 2

2回答

无敌大熊熊

你为什么能邀请我？？

0 0

Doit的信仰

只有2d的

0 0

随时随地看视频慕课网APP