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

课程

/前端开发

/CSS3

/CSS3 3D 特效

请问一下为什么我代码跟老师的一模一样，但是却没有效果呢

<!DOCTYPE html>

<html>

<head>

    <title>3D效果</title>

    <style>

        #my3Dspace{

          -webkit-perspective: 800;

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

            ovetflow:hidden;


        }


        #pagegrounp{

           width:400px;

            height:400px;

            margin: 0 auto;

            -webkit-transform-style: preserve-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-transition: -webkit-transform 1s linear;

        }

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

            -webkit-transform-origin: bottom;

            -webkit-transition: -webkit-transform 1s linear;

            -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="rotate(0deg)";

}

function prec(){

if(curIndex==1)return;

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

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

curIndex--;

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

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

}

</script>

</head>

<body>

<div id="my3Dspace">

    <div id="pagegrounp">

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

</div>

</body>

</html>


xiaodanxu

2016-03-22

源自：CSS3 3D 特效  3-2

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

正在回答

4 回答

liyao0907
2016-05-16

你可以检查一下你的代码，css中#my3Dspace中overflow拼错了，JS中一个你写成了rotate，

0 回复 有任何疑惑可以回复我~
收起回答
小千63
2016-04-11

浏览器兼容的webkit改一下，-moz,-ms,-o，看你的浏览器是什么

0 回复 有任何疑惑可以回复我~
收起回答
ry836478606
2016-03-23

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>翻页效果</title>

<style type="text/css">

.wrap{width:400px;height: 400px;margin: 100px auto;

color: yellow;}

#pagegroup

{

position: relative;

width: 360px;

height: 360px;

margin: 20px auto;

-webkit-perspective:800;

-webkit-perspective-origin:center center;


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

-webkit-transform-origin:left;

-webkit-transition:transform 1s linear;

}

.page{position: absolute;width: 360px;height: 360px;font:bold 360px/360px SimHei;text-align: center;vertical-align: middle;background-color:rgba(0,0,0,0.3);/* opacity: 0.3 */;

-webkit-transform-origin:left;

-webkit-transition:transform 1s linear;}

#page1{transform: rotateY(0deg);}

#page6,#page2,#page3,#page4,#page5{transform: rotateY(90deg);}


.lr-bt{margin: 50px auto;text-align: center;}

</style>


<script style="text/javascipt">

var curpage = 1;

function pre(){

if(curpage == 1)

return;

var nowpage = document.getElementById("page"+curpage);

nowpage.style.transform = "rotateY(90deg)";

curpage--;

var prepage = document.getElementById("page"+curpage);

prepage.style.transform = "rotateY(0deg)";

console.log("当前是第"+curpage+"页");

}


function next(){

if(curpage == 6)

return;

var nowpage  =document.getElementById("page"+curpage);

nowpage.style.transform = "rotateY(-90deg)";

curpage++;

var nextpage = document.getElementById("page"+curpage);

nextpage.style.transform = "rotateY(0deg)";

console.log("当前是第"+curpage+"页");

}

</script>

</head>

<body>

<div>

<div id="pagegroup">

<div id="page1">1</div>

<div id="page2">2</div>

<div id="page3">3</div>

<div id="page4">4</div>

<div id="page5">5</div>

<div id="page6">6</div>

</div>

<div>

<a href="javascript:pre();">前一页</a>&nbsp&nbsp&nbsp

<a href="javascript:next();">下一页</a>

</div>

</div>

</body>

</html>


0 回复 有任何疑惑可以回复我~
收起回答
ry836478606
2016-03-23

position:relative;位置定位最好写在css的第一个，那些都是有读取顺序的

0 回复 有任何疑惑可以回复我~
收起回答

举报

0/150
提交
取消
CSS3 3D 特效
  • 参与学习       78572    人
  • 解答问题       425    个

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

进入课程

本课相似问答

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

1 回答为什么perspective-origin的属性跟视频一样的设置效果会不一样呢？

2 回答为什么我的第一张出来的效果是6呢

1 回答有人能给我一段3d效果的代码吗？

1 回答为什么跟讲的不一样
搜索更多本课相关问答

请问一下为什么我代码跟老师的一模一样，但是却没有效果呢

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