為什么這些代碼在我的瀏覽器中都無法實現？？？？？著急?。。?！
<!DOCTYPE html>
<html>
<head>
? ? <link rel="stylesheet" type="text/css" href="style.css">
? ? <title>正方體</title>
</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>
</body>
</html>
css部分：
html, body, div, span,
? ? ? ? h1, h2, h3, h4, h5, h6, p
? ? ? ? a, img, ol, ul, li
? ? ? ? {
? ? ? ? ? ? margin:0;padding:0;border:0;outline:0;
? ? ? ? }
? ? ? ? #my3dspace{
? ? ? ? -webkit-perspective:2000;
-webkit-perspective-origin:80% 50%;
margin-top:100px;
}
#pagegroup{
width:400px;
height:400px;
margin:0 auto;
-webkit-transform-style:preserve-3d;
position:relative;
-webkit-tranform-origin:center center;
-webkit-transition:transform 5s;
}
#pagegroup:hover{
-webkit-transform:rotate3d(0.5,0.5,0,360deg);
}
.page{
width:360px;
height:360px;
padding:18px;
border:1px solid #fff;
background-color:rgba(0,0,0,.5);
color:white;
font-weight:bold;
font-size:360px;
line-height:360px;
text-align:center;
position:absolute;
}
#page1{
-webkit-transform-origin:bottom;
}
#page2{
-webkit-transform-origin:right;
-webkit-transform:rotateY(-90deg);
}
#page3{
-webkit-transform-origin:bottom;
-webkit-transform:translateZ(-400px);
}
#page4{
-webkit-transform-origin:left;
-webkit-transform:rotateY(90deg);
}
#page5{
-webkit-transform-origin:top;
-webkit-transform:rotateX(-90deg);
}
#page6{
-webkit-transform-origin:bottom;
-webkit-transform:rotateX(90deg);
}
#op{
text-align:center;
margin:40px auto;
}
2015-03-25
有用谷歌而且可能你谷歌版本太低了..