-慕课网

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

来源：3-2 JS部分

天涯海草

2014-11-01 22:20

有没有大神愿意指导一下呢？

<!DOCTYPE html>

<html>

<head>

<style>

#my3dspace{

-webkit-perspective:800;

-webkit-perspective-origin:50% 50%;

overflow:hidden;

}

#pagegroup{

width:400px;

height:400px;

margin:0 aute;

-webkit-transform-style:perserve-3d;

position:relative;

}

page{

width:360px;

height:360px;

padding:20px;

background-color:black;

color:white;

font-weight:bold;

font-size:360px;

line-height:360px;

text-align:center;

position:absolute;

}

#page1{

-webkit-transform-origin:bottom;

-webkit-transform:-webkit-transform 1s linar;

}

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

-webkit-transform-origin:bottom;

-webkit-transform:-webkit-transform 1s linar;

-webkit-transform:rotateX(90deg);

}

#op{

text-align:center;

margin:40px aute;

}

</style>

var curImdex=1;

function next(){

if(curIndex=6)

return;

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

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

curIndx ++;

var nextPage=document.getElementById("+curImdex");

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

}

function prev(){

if(curIndex=1)

return;

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

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

curIndex -;

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

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

}

</script>

</head>

<body>

</div>

<a href="javascript:next()">next</a> <a href="javascript:prve()

">previous</a>

</div>

</body>

</html>

写回答关注

2回答

冰宁496058

2014-11-04 14:11:56

<!DOCTYPE html>

<html>

<head>

<title></title>

<style>

    #my3dspace{

     perspective:800;

     -webkit-perspective-origin:50% 50%;
     overflow: hidden;

   }

   #pagegroup{
     width:400px;
     height:400px;
     margin:0 auto;
     -moz-transform-style:perserve-3d;
     -webkit-transform-style:perserve-3d;
     transform-style:perserve-3d;
     position:relative;
   }
   .page{
     width:360px;
     height:360px;
     padding:20px;
     background-color:black;
     color:white;
     font-weight:bold;
     font-size:360px;
     line-height:360px;
     text-align:center;
     position:absolute;
     -webkit-transition:-webkit-transform 1s linear;
     -webkit-transform-origin:bottom;
   }
   #page2,#page3,#page4,#page5,#page6{
    -webkit-transform:rotateX(90deg);
}
#op{
   text-align:center;
   margin:40px auto;
}
</style>
<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 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 id="my3dspace">
<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:prev();">previous</a>
</div>
</body>
</html>
这个是对的！

0 0
冰宁496058

2014-11-04 13:37:10

<!DOCTYPE html>

<html>

<head>

<title></title>

<style>

#my3dspace{

    -webkit-perspective:800px;

    -webkit-perspective-origin:50% 50%;

     }

#pagegroup{

     width:400px;

     height:400px;

     margin:0 auto;

    -moz-transform-style:perserve-3d;
    -webkit-transform-style:perserve-3d;
    transform-style:perserve-3d;

   position:relative;
   overflow: hidden;

}

.page{

     width:360px;

     height:360px;

     padding:20px;

     background-color:black;
color:white;

     font-weight:bold;

     font-size:360px;

     line-height:360px;

     text-align:center;
    position:absolute;
    -webkit-transition:-webkit-transform 2s linear;

}

#page1{
-webkit-transform-origin:bottom;
-webkit-transform:rotateX(0deg);
}
#page2,#page3,#page4,#page5,#page6{
-webkit-transform-origin:bottom;
-webkit-transform:rotateX(90deg);
}
#op{

   text-align:center;

   margin:40px auto;

}

</style>

<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 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 id="my3dspace">

    <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:prev();">previous</a>

</div>

</body>

</html>
你自己对对吧，变量不统一，还有样式写的位置不对，js里的变量curIndex你写的都不一样，还有一个问题，就是chrome浏览器1，6显示的问题，这个我也没看出来哪不对，你在仔细看看吧

0 0

CSS3 3D 特效

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

78561 学习 · 436 问题

查看课程

相似问题

求助：在opera浏览器中无3d效果

回答 3

服务收费为

回答 1

浏览器兼容

回答 2

可以给个中间的transform-origin:center; 的demo吗

回答 2

chrome下的z-index问题

回答 2

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