CSS之3D翻转效果

<!DOCTYPE html>  
<html>  
<head>  
    <title></title>  
    <style type="text/css">  
        #a{  
            -webkit-perspective:800;  
            -webkit-perspective-origin:50% 50%;  
              
  
            overflow: hidden;  
        }  
        #pagegroup{  
            width: 400px;  
            height: 400px;  
            margin: 0 auto;  
            -webkit-transform-style:preserve-3d;  
            position: relative;  
        }  
        .page{  
            width: 360px;  
            height: 360px;  
            padding: 20px;  
            background: #000;  
            color: #fff;  
            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>  
</head>  
<body>  
<div id="a">  
    <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:perv()">perv</a>  
</div>  
  
<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="rotateX(0deg)";  
  
    }  
    function perv(){  
        if(curIndex==1){  
            return;  
        }  
        var curPage=document.getElementById('page'+curIndex);  
        curPage.style.webkitTransform="rotateX(90deg)";  
        curIndex--;  
        var nextPage=document.getElementById('page'+curIndex);  
        nextPage.style.webkitTransform="rotateX(0deg)";  
    }  
</script>  
</body>  
</html>
CSS之3D翻转效果

推荐阅读
