css3 --- 翻页动画 --- javascript --- 3d --- Action

 

用css3和javascript做一个翻页动画<Action>

 

如有疑问请参照我的上一篇随笔:http://www.cnblogs.com/kodoyang/p/Html_Css3_CardPage_Prepare.html

 设置了六个卡片的div并初始化,用javascript函数改变它们的旋转属性。

 

 代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>card page</title>
    <style> #my3dspace { -webkit-perspective: 800px; -webkit-perspective-origin: 50% 50%; overflow: hidden;
        } #pagegroup { width: 400px; height: 400px; margin: 0 auto; -webkit-transform-style: preserve-3d; position: relative;
        } .page{ width: 300px; height: 300px; padding: 20px; background-color: black; color: white; font-weight: hold; font-size: 300px; line-height: 300px; 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>
        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 prev(){ if( curIndex == 1 ) return; var curPage = document.getElementById("page" + curIndex); curPage.style.webkitTransform = "rotateX(90deg)"; --curIndex; var prevPage = document.getElementById("page" + curIndex); prevPage.style.webkitTransform = "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();">prev</a>
    </div>
</body>
</html>

 

 

下面是它的效果截图:

css3 --- 翻页动画 --- javascript --- 3d --- Action_第1张图片css3 --- 翻页动画 --- javascript --- 3d --- Action_第2张图片

css3 --- 翻页动画 --- javascript --- 3d --- Action_第3张图片css3 --- 翻页动画 --- javascript --- 3d --- Action_第4张图片

 

 

这一篇写了不少了,就先到此吧

更多好文请关注:http://www.cnblogs.com/kodoyang/

 

 

你可能感兴趣的:(css3 --- 翻页动画 --- javascript --- 3d --- Action)