为什么我的看不出3D效果啊-慕课网

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

为什么我的看不出3D效果啊

来源：3-2 JS部分

qq_碎影流年_0

2017-06-05 17:06

<!doctype html>

<html>

<head>

<title>无标题文档</title>

<style>

#my3dspace{

perspective:800;

perspective-origin:50% 50%;

transform-style:preserve-3d;

overflow:hidden;

}

#pagegoup{

width:400px;

height:400px;

margin:0 auto;

transform-style:preserve-3d;

position:relative;

}

.page{

width:360px;

height:360px;

padding:20px;

background-color:black;

color:white;

font-weight:bold;

font-size:350px;

line-height:360px;

text-align:center;

position:absolute;

font-family:微软雅黑;

}

#page1{

transform-origin:bottom;//最底部沿 X 轴旋转

transition:tranform 1s linear;//匀速旋转

}

#page2{

transform-origin:bottom;

transition:tranform 1s linear;

transform:rotateX(90deg);

}

#page3{

transform-origin:bottom;

transition:tranform 1s linear;

transform:rotateX(90deg);

}

#page4{

transform-origin:bottom;

transition:tranform 1s linear;

transform:rotateX(90deg);

}

#page5{

transform-origin:bottom;

transition:tranform 1s linear;

transform:rotateX(90deg);

}

#op{

text-align:center;

margin:40px auto;

}

</style>

var curIndex=1;

function next(){

if(curIndex==5) {return;}

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

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

curIndex ++;

var nextPage = document.getElementById("page" + curIndex);

nextPage.style.transform = "rotateX(0deg)";

}

function prev(){

if(curIndex==1) {return;}

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

curPage.style.webkitTransform="rotateX(90deg)";

curIndex--;

var prevPage=document.getElementById("page"+curIndex);

prevPage.style.webkitTransform="rotateX(0deg)";

}

</script>

</head>

<body>

</div>

<a href="javascript:prev()">previous</a>

</div>

</body>

</html>

写回答关注

1回答

qq_碎影流年_0

2017-06-05 17:09:24

3dspace里800加了px还是没有效果

0 0

CSS3 3D 特效

使用CSS3当中的属性，创建真实可用的三维效果

78569 学习 · 434 问题

查看课程

相似问题

实现不出来3D效果

回答 2

用的谷歌浏览器，代码都对为什么3d效果显示不出啊

回答 2

3D转换看不出近大远小的效果，怎么回事？

回答 3

为什么我的代码没任何效果，能翻页但没有3D效果

回答 2

CSS3 3D效果

回答 1

打开慕课网App查看更多内容