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

出不來效果

我用的是火狐的瀏覽器，但是代碼是和老師一起敲打的，根本就沒有錯誤，就是瀏覽器的問題，但是根本就出不來翻頁的效果，看了好多遍，很是郁悶

<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html?xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>
<title>日歷的反轉(zhuǎn)的設置</title>
<style>
#my3dspace{?
-moz-perspective:?800px;
-moz-perspective-origin:?50%?50%;
overflow:?hidden;
}
#mypage{
?height:400px;
?width:400px;
?margin:?0?auto;
?
-moz-transform-style:?preserve-3d;
position:?relative;
}
.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{
????-moz-transform-origin:bottom;?
?-moz-transition:-moz-transform?1s?linear;
}
#page2,#page3,#page4,#page5{
???-moz-transform-origin:bottom;?
???-moz-transition:-moz-transform?1s?linear;
???-moz-transform:?rotateX(90deg);
}
#op{
text-align:center;
margin:40px?auto;
}
</style>
<script?type="text/javascript">
var?curIndex=?1;
function?next(){
????if(curIndex?==5)
?return;
?var?curPage?=?document.getElementById("page"+curIndex);
?alert("1");
?curPage.style.webkitTransform?=?"rotateX(-90deg)";
?alert("2");
?curIndex++;
?var?nextPage?=?document.getElementById("page"+curIndex);
?alert("3");
?nextPage.style.webkitTransform?=?"rotateX(0deg)";
?alert("4");
?
?}
?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="ratateX(0deg)";
??}
</script>
</head>
<body>
<div?id="my3dspace">
<div?id="mypage">
<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>
</div>
<div?id="op">
<a?href="javascript:next()">next</a>&nbsp;<a?href="javascript:prev()">previous</a>
</div>
</body>
</html>