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

各位大神幫看一看，為何我顯示的是第6頁(yè)，不是教程第一頁(yè)，請(qǐng)說一說原因，我用的是qq瀏覽器

<!DOCTYPE html>
<html>
<head>
??? <title>cube - liuyubobobo</title>

??? <style>
? ?
??????? #experiment{
??????????? -webkit-perspective: 800;
??????????? -webkit-perspective-origin: 50% 50%;
?? ??? ??? ?
?? ??? ??? ?overflow:hidden
??????? }
??????? #cube{
??????????? position: relative;
??????????? margin:0px auto;
??????????? height:400px;
??????????? width:400px;
??????????? -webkit-transform-style:preserve-3d;
??????? }
??????? .face{
?????????? ?
??????????? height:360px;
??????????? width:360px;
??????????? padding:20px;
??????????? background-color: black;

??????????? color:white;
??????????? font-weight:bold;
??????????? font-size:360px;
??????????? line-height:360px;
??????????? text-align:center;
??????????? position:absolute;
??? ?
??????? }
??????? #face1? {-webkit-transform-origin:bottem;
?? ??? ????????? -webkit-transition:-webkit-transform is linear;
??????? }
??????? #face2 {-webkit-transform-origin:bottem;
?? ??? ???????? -webkit-transition:-webkit-transform is linear;
?? ??? ??? ??? ?-webkit-transform rotateX(90deg);
????????? ?
??????? }
??????? #face3 {
??????????? -webkit-transform-origin:bottem;
?? ??? ???????? -webkit-transition:-webkit-transform is linear;
?? ??? ??? ??? ?-webkit-transform rotateX(90deg);
??????? }? ?
??????? #face4 {
??????????? -webkit-transform-origin:bottem;
?? ??? ???????? -webkit-transition:-webkit-transform is linear;
?? ??? ??? ??? ?-webkit-transform rotateX(90deg);
????????? ?
??????? }
??????? #face5 {
??????????? -webkit-transform-origin:bottem;
?? ??? ???????? -webkit-transition:-webkit-transform is linear;
?? ??? ??? ??? ?-webkit-transform rotateX(90deg);
????????? ?
??????? }
??????? #face6 {
??????????? -webkit-transform-origin:bottem;
?? ??? ???????? -webkit-transition:-webkit-transform is linear;
?? ??? ??? ??? ?-webkit-transform rotateX(90deg);
??????? }

??????? #op{
??????????? text-align:center;margin:40px auto;
??????? }
????????? ?
??? </style>

?
</head>
<body>
<body>

<div id="experiment">
??? <div id="cube">
??????? <div class="face" id="face1">1</div>
??????? <div class="face" id="face2">2</div>
??????? <div class="face" id="face3">3</div>
??????? <div class="face" id="face4">4</div>
??????? <div class="face" id="face5">5</div>
??????? <div class="face" id="face6">6</div>
??? </div>
</div>
<div id="op">
??? <a href="javascript:next()">next</a>  <a href="javascript:prey()">preyvious</a>;

</div>
</body>
</html>