为了账号安全，请及时绑定邮箱和手机立即绑定

课程

/前端开发

/CSS3

/CSS3 3D 特效

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

<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>&nbsp;<a href="javascript:prev()">previous</a>
 </div>
</body>
</html>

啦啦啦123

2015-02-03

源自：CSS3 3D 特效  3-2

关注问题 我要回答
1633
操作
收起

正在回答

3 回答

鱿鱼
2015-03-06

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

0 回复 有任何疑惑可以回复我~
收起回答
derrick9006
2015-02-12

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

0 回复 有任何疑惑可以回复我~
收起回答
derrick9006
2015-02-12

希望您满意此答案

<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/150
提交
取消
CSS3 3D 特效
  • 参与学习       78572    人
  • 解答问题       425    个

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

进入课程

本课相似问答

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

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

2 回答为什么么效果

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

2 回答为什么我的代码没任何效果，能翻页但没有3D效果
搜索更多本课相关问答

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

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信