<!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;
}
有用谷歌而且可能你谷歌版本太低了..