                        課程
                    
                        /前端開發
                        
                            /CSS3
                        
                        /CSS3 3D 特效

瀏覽器兼容

<!DOCTYPE?html>
<html>
<head>
<meta?charset="UTF-8">
<title>Document</title>
<style?type="text/css">
????#my3dspace{
????????perspective:800;
????????-webkit-perspective:?800;
????????-moz-perspective:800;
????????-ms-perspective:800;
????????
????????perspective-origin:50%?50%;
????????-webkit-perspective-origin:?50%?50%;
????????-moz-perspective-origin:50%?50%;
????????-ms-perspective-origin:50%?50%;
????????
????????overflow:?hidden;
????}
????
????#pagegroup{
????????width:?400px;
????????height:?400px;
????????transform-style:?preserve-3d;
????????-webkit-transform-style:?preserve-3d;
????????-moz-transform-style:preserve-3d;
????????-ms-transform-style:preserve-3d;
????????position:?relative;
????????margin:?0?auto;
????????backface-visibility:hidden;
????}
????
????.page{
????????width:?360px;
????????height:?360px;
????????padding:?20px?20px;
????????background-color:black;
????????color:?white;
????????font-size:?360px;
????????font-weight:?bold;
????????text-align:?center;
????????line-height:?360px;
????????position:?absolute;
????
????}
????
????#page1{
????????transform-origin:bottom;
????????transition:transform?1s?linear;
????????
????????-webkit-transform-origin:?bottom;
????????-webkit-transition:?transform?1s?linear;
????????
????????-moz-transform-origin:bottom;
????????-moz-transition:transform?1s?linear;
????????
????????-ms-transfrom-origin:bottom;
????????-ms-transition:transform?1s?linear;
????}
????#page2,#page3,#page4,#page5,#page6{
????????transform-origin:bottom;
????????transition:transform?1s?linear;
????????transform:rotateX(90deg);
????????
????????-webkit-transform-origin:?bottom;
????????-webkit-transition:?transform?1s?linear;
????????-webkit-transform:?rotateX(90deg);
????????
????????-moz-transform-origin:bottom;
????????-moz-transition:transform?1s?linear;
????????-moz-transform:?rotateX(90deg);
????????
????????-ms-transform-origin:bottom;
????????-ms-transition:transform?1s?linear;
????????-ms-transform:rotateX(90deg);
????}
????#op{text-align:center;}
</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)";
????????
????????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?id="page1">1</div>
????????????<div?id="page2">2</div>
????????????<div?id="page3">3</div>
????????????<div?id="page4">4</div>
????????????<div?id="page5">5</div>
????????????<div?id="page6">6</div>
????????</div>
????</div>
????<div?id="op">
????????<a?href="javascript:next()">next</a>&nbsp;
????????<a?href="javascript:prev()">previous</a>
????</div>
</body>
</html>

高版本ie和firefox都不好使，只有chrome好用，哪位大俠幫我解釋下？