为了账号安全,请及时绑定邮箱和手机立即绑定
关注
qq_独坐一隅_0

看了好久,还是不知哪里错了,只是翻下一页的效果

<!DOCTYPE html>

<html>

<head>

    <title>正方体</title>

</head>

<style>

    #op{

        text-align:center;

        margin:40px auto;}

    #3dspage{-webkit-perspective:800;

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

    overflow:hidden;

    }

    #pagegroup{-webkit-transform-style:preserve-3d;

    width:400px;height:400px;position:relative;margin:0 auto;}

    .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)

    }

</style>

<script type="text/javascript">

    var curIndex=1;

    function next(){

        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(){

        

    }

</script>

<body>

<div id="3dspage">

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

</div>

</body>

</html>


2016-08-31 源自:CSS3 3D 特效 3-4 340 浏览 1 回答

  你翻上一页的的函数都是空的,什么都没写,怎么会有效果呢

给你!

function prev(){

if(curIndex==1)

return;

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

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

curIndex--;

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

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

}


2016-09-02
回复 1

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信