为什么按老师说的没什么效果呢，望大神指点-慕课网

为什么按老师说的没什么效果呢，望大神指点

来源：3-2 JS部分

啦啦啦123

2015-02-03 17:18

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#my3dspace {
   -webkit-perspective:800px;
   -moz-perspective:800px;
   -ms-perspective:800px;
   -o-perspective:800px;
   perspective:800px;
   -webkit-perspective-origin:50% 50%;
   -moz-perspective-origin:50% 50%;
   -ms-perspective-origin:50% 50%;
   -o-perspective-origin:50% 50%;
   perspective-origin:50% 50%;
   overflow:hidden;}
#pagegroup{
   width:400px;
   height:400px;
   margin:0 auto;
    position:relative;
   -webkit-transform-style:preserve-3d;
   -moz-transform-style:preserve-3d;
   -ms-transform-style:preserve-3d;
   -o-transform-style:preserve-3d;
   transform-style:preserve-3d;
   }
.page{
   width:360px;
   height:360px;
   padding:20px;
   background-color:#000;
   color:#FFF;
   font-weight:bold;
   font-size:360px;
   line-height:360px;
   text-align:center;
   position:absolute;
   }
#page1{
   -webkit-transform-origin:bottom;
   -moz-transform-origin:bottom;
   -ms-transform-origin:bottom;
   -o-transform-origin:bottom;
   transform-origin:bottom;
   -webkit-transition:-webkit-transform 1s linear;
   -moz-transition:-moz-transform 1s linear;
   -ms-transition:-ms-transform 1s linear;
   -o-transition:-o-transform 1s linear;
   transition:transform 1s linear;
   }
#page2,#page3,#page4,#page5,#page6{
   -webkit-transform-origin:bottom;
   -moz-transform-origin:bottom;
   -ms-transform-origin:bottom;
   -o-transform-origin:bottom;
   transform-origin:bottom;
   -webkit-transition:-webkit-transform 1s linear;
   -moz-transition:-moz-transform 1s linear;
   -ms-transition:-ms-transform 1s linear;
   -o-transition:-o-transform 1s linear;
   transition:transform 1s linear;
   -webkit-transform:rotateX(90deg);
   -moz-transform:rotateX(90deg);
   -ms-transform:rotateX(90deg);
   -o-transform:rotateX(90deg);
   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)";
       curPage.style.mozwebkitTransform="rotateX(-90deg)";
       curPage.style.mswebkitTransform="rotateX(-90deg)";
       curPage.style.owebkitTransform="rotateX(-90deg)";
       curPage.style.Transform="rotateX(-90deg)";
       curIndex ++;
       var nextPage=document.getElementById("page"+curIndex);
       nextPage.style.webkitTransform="rotateX(0deg)";
       nextPage.style.mozTransform="rotateX(0deg)";
       nextPage.style.msTransform="rotateX(0deg)";
       nextPage.style.oTransform="rotateX(0deg)";
       nextPage.style.Transform="rotateX(0deg)";
      }
function prev(){
       if(curIndex==1){
        return;}
       var curPage=document.getElementById("page"+curIndex);
       curIndex.style.webkitTransform="rotateX(90deg)";
       curIndex.style.mozTransform="rotateX(90deg)";
       curIndex.style.msTransform="rotateX(90deg)";
       curIndex.style.oTransform="rotateX(90deg)";
       curIndex.style.Transform="rotateX(90deg)";
       curIndex --;
       var prevPage=document.getElementById("page"+curIndex);
       prevPage.style.webkitTransform="rotateX(0deg)";
       prevPage.style.mozTransform="rotateX(0deg)";
       prevPage.style.msTransform="rotateX(0deg)";
       prevPage.style.oTransform="rotateX(0deg)";
       prevPage.style.Transform="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>

写回答关注

3回答

鱿鱼

2015-03-06 16:53:11

在各个浏览器上试了一下，其实可以不添加前缀的

0 0
derrick9006

2015-02-12 00:36:03

简单地说就是在prev()误把curPage.style.webkitTransform="rotateX(90deg)";写成curIndex.style.webkitTransform="rotateX(90deg)";

0 0

derrick9006: 2015-02-12 00:31:11

希望您满意此答案

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#my3dspace {
    -webkit-perspective:800px;
    -moz-perspective:800px;
    -ms-perspective:800px;
    -o-perspective:800px;
    perspective:800px;
    -webkit-perspective-origin:50% 50%;
    -moz-perspective-origin:50% 50%;
    -ms-perspective-origin:50% 50%;
    -o-perspective-origin:50% 50%;
    perspective-origin:50% 50%;
    overflow:hidden;}
#pagegroup{
    width:400px;
    height:400px;
    margin:0 auto;
    position:relative;
    -webkit-transform-style:preserve-3d;
    -moz-transform-style:preserve-3d;    
    -ms-transform-style:preserve-3d;
    -o-transform-style:preserve-3d;
    transform-style:preserve-3d;
    }
.page{
    width:360px;
    height:360px;
    padding:20px;
    background-color:#000;
    color:#FFF;
    font-weight:bold;
    font-size:360px;
    line-height:360px;
    text-align:center;
    position:absolute;
    }
#page1{
    -webkit-transform-origin:bottom;
    -moz-transform-origin:bottom;
    -ms-transform-origin:bottom;
    -o-transform-origin:bottom;
    transform-origin:bottom;
    -webkit-transition:-webkit-transform 1s linear;
    -moz-transition:-moz-transform 1s linear;
    -ms-transition:-ms-transform 1s linear;
    -o-transition:-o-transform 1s linear;
    transition:transform 1s linear;
    }
#page2,#page3,#page4,#page5,#page6{
    -webkit-transform-origin:bottom;
    -moz-transform-origin:bottom;
    -ms-transform-origin:bottom;
    -o-transform-origin:bottom;
    transform-origin:bottom;
    -webkit-transition:-webkit-transform 1s linear;
    -moz-transition:-moz-transform 1s linear;
    -ms-transition:-ms-transform 1s linear;
    -o-transition:-o-transform 1s linear;
    transition:transform 1s linear;
    -webkit-transform:rotateX(90deg);
    -moz-transform:rotateX(90deg);
    -ms-transform:rotateX(90deg);
    -o-transform:rotateX(90deg);
    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)";   
	   curPage.style.mozwebkitTransform="rotateX(-90deg)";
       curPage.style.mswebkitTransform="rotateX(-90deg)";
       curPage.style.owebkitTransform="rotateX(-90deg)";
       curPage.style.Transform="rotateX(-90deg)";	   
       curIndex ++;
       var nextPage=document.getElementById("page"+curIndex);
       nextPage.style.webkitTransform="rotateX(0deg)";
	   nextPage.style.mozwebkitTransform="rotateX(0deg)";
       nextPage.style.mswebkitTransform="rotateX(0deg)";
       nextPage.style.owebkitTransform="rotateX(0deg)";
       nextPage.style.Transform="rotateX(0deg)";	   
      }
  function prev(){    
       if(curIndex==1){
        return;}
       var curPage=document.getElementById("page"+curIndex);	   
       curPage.style.webkitTransform="rotateX(90deg)";  
	   curPage.style.mozwebkitTransform="rotateX(90deg)";
       curPage.style.mswebkitTransform="rotateX(90deg)";
       curPage.style.owebkitTransform="rotateX(90deg)";
       curPage.style.Transform="rotateX(90deg)";	   
       curIndex--;
       var nextPage=document.getElementById("page"+curIndex);
       nextPage.style.webkitTransform="rotateX(0deg)"; 
	   nextPage.style.mozwebkitTransform="rotateX(0deg)";
       nextPage.style.mswebkitTransform="rotateX(0deg)";
       nextPage.style.owebkitTransform="rotateX(0deg)";
       nextPage.style.Transform="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">
 &nbsp;<a href="javascript:prev()">previous</a>&nbsp;<a href="javascript:next()">next</a>
 </div>
</body>
</html>

0 0

CSS3 3D 特效

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

78572 学习 · 425 问题

查看课程

相似问题

求大神指教为什么效果消失不出来

回答 2

为什么chrome点击没有效果，用360极速有翻页，但没有3D效果呢？？？

回答 1

为什么么效果

回答 2

为什么只有第一放大的动画效果

回答 1

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

回答 2

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