课程

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

CSS3 3D效果

来源：3-2 JS部分

zxjiao

2016-08-19 14:04

不知道什么地方出错了，不翻页，谷歌显示”Cannot read property 'style' of null“，这个要怎么修改啊？？？

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

<style type="text/css">

    #my3d{

        -webkit-perspective:800px;

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


        overflow:hidden;

    }

    

    #book{

        width:400px;

        height:400px;

        margin:0 auto;

        

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

        

        position:relative;

    }

    

    .page{

        width:400px;

        height:400px;

        background-color:black;

        

        color:white;

        

        font-weight:bold;

        font-size:380px;

        line-height:380px;

        text-align:center;

        

        position:absolute;

}

    #p1{

        -webkit-transform-origin:bottom;

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

    }

#p2,#p3,#p4,#p5,#p6{

     -webkit-transform-origin:bottom;

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

    -webkit-transform:rotateX(90deg);

    }

#po{

    text-align:center;

    margin:40px auto;

}

</style>

<script type="text/javascript">

var index=1;

function next(){

   if(index==6){

return;

}

   var index=document.getElementById("p"+index);

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

index++;

var nextindex=document.getElementById("p"+index);

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

}

function pre(){

   if(index==1){

return;

}

   var index=document.getElementById("p"+index);

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

index--;

var preindex=document.getElementById("p"+index);

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

}

</script>

</head>

<body>

    <div id="my3d">

        <div id="book">

            <div class="page" id="1">1</div>

            <div class="page" id="p2">2</div>

            <div class="page" id="p3">3</div>

            <div class="page" id="p4">4</div>

            <div class="page" id="p5">5</div>

            <div class="page" id="p6">6</div>

        </div>

    </div>

    

    <div id="po">

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

        <a href="javascript:pre()">pre</a>

    </div>

</body>

</html>


写回答 关注

1回答

  • 慕粉3800451
    2016-08-21 14:55:46
    已采纳

     var index=document.getElementById("p"+index);

    变量定义重复了，换个名字，比如 var p =

    1 1

    zxjiao

    非常感谢！运行出来了！

    2016-08-21 16:46:24

    共 1 条回复 >

CSS3 3D 特效

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

78572 学习 · 425 问题

查看课程

相似问题

没有3D效果！

回答 1

css3的3d动画不兼容ie

回答 1

实现不出来3D效果

回答 2

求助：关于Firefox无3d效果

回答 7

rotateX使用之后没有3D效果

回答 4

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