                        課程
                    
                        /前端開發(fā)
                        
                            /CSS3
                        
                        /CSS3 3D 特效

這樣寫可以實(shí)現(xiàn)

<!DOCTYPE html>
<html>
<head>
??? <title></title>
??? <style>
??????? #my3dspace{
??????????? -webkit-perspective:800;
??????????? -moz-perspective:800;
??????????? perspective:800;
??????????? -webkit-perspective-origin:50% 50%;
??????????? -moz-perspective-origin:50% 50%;
??????????? perspective-origin:50% 50%;

??????????? overflow:hidden;
??????? }
??????? #pagegroup{
??????????? width:400px;
??????????? height:400px;
??????????? margin:0 auto;

??????????? -webkit-transform-style:preserve-3d;
??????????? -moz-transform-style:preserve-3d;
??????????? transform-style:preserve-3d;
??????????? position:relative;
??????? }
??????? .page{
??????????? width:360px;
??????????? height:360px;
??????????? padding:20px;
??????????? background-color:#000000;

??????????? color:white;

??????????? font-weight:bold;
??????????? font-size:360px;
??????????? line-height:360px;
??????????? text-align:center;

??????????? position:absolute;
??????? }
??????? #page1{
??????????? -webkit-transform-origin:bottom;
??????????? -moz-transform-origin:bottom;
??????????? transform-origin:bottom;
??????????? -webkit-transition:-webkit-transform 1s linear;
??????????? -moz-transition:-moz-transform 1s linear;
??????????? transition:transform 1s linear;
??????? }
??????? #page2,#page3,#page4,#page5,#page6{
??????????? -webkit-transform-origin:bottom;
??????????? -moz-transform-origin:bottom;
??????????? transform-origin:bottom;
??????????? -webkit-transition:-webkit-transform 1s linear;
??????????? -moz-transition:-moz-transform 1s linear;
??????????? transition:transform 1s linear;
??????????? -webkit-transform:rotateX(90deg);
??????????? -moz-transform:rotateX(90deg);
??????????? 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)";
?? ??? ??? ?curPage.style.mozTransform="rotateX(-90deg)";
?? ??? ??? ?curPage.style.Transform="rotateX(-90deg)";

??????????? curIndex ++;
??????????? var nextPage = document.getElementById("page"+curIndex);
??????????? nextPage.style.webkitTransform = "rotateX(0deg)";
?? ??? ??? ?nextPage.style.mozTransform = "rotateX(0deg)";
?? ??? ??? ?nextPage.style.Transform = "rotateX(0deg)";

??????? }
??????? function prev(){
?? ??? ??? ?
?? ??? ??? ?if(curIndex == 1)
?? ??? ??? ??? ?return;
?? ??? ??? ?
?? ??? ??? ?var curPage = document.getElementById("page"+curIndex);
?? ??? ??? ?curPage.style.webkitTransform = "rotateX(90deg)";
?? ??? ??? ?curPage.style.mozTransform = "rotateX(90deg)";
?? ??? ??? ?curPage.style.Transform = "rotateX(90deg)";
?? ??? ??? ?
?? ??? ??? ?curIndex --;
?? ??? ??? ?var prevPage = document.getElementById("page"+curIndex);
?? ??? ??? ?prevPage.style.webkitTransform = "rotateX(0deg)";
?? ??? ??? ?prevPage.style.mozTransform = "rotateX(0deg)";
?? ??? ??? ?prevPage.style.Transform = "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> <a href="javascript:prev()">previous</a>
?????????? </div>

</body>
</html>