本文章取材于网上教程和css3官方文档
在网页上构建3d，实际就是将浏览器看成一个窗口，透过窗口去看里面的三维立体，从而将二维平面变成了三维平面。而css3提供了相对应的方法。
首先是perspective和perspective-origin属性。这两个属性是构建所谓的窗口。
perspective 规定了窗口到三维立体的距离，官方文档的解释是指定观察者与「z=0」平面的距离，使具有三维位置变换的元素产生透视效果。
而perspective-origin就是人看这个窗口的位置，官方文档的说法是指定透视点的位置。
该属性提供2个参数值。如果提供两个，第一个用于横坐标，第二个用于纵坐标。
如果只提供一个，该值将用于横坐标；纵坐标将默认为center。接下来确定了窗口，就要通过使用transform属性对三维立体图形进行变换。在css3里，transform常用有三个语法(实际还有两个，扭曲和矩阵)，一个是translate()即平移，一个是rotate()即旋转，一个是scale()即缩放。
而transform既可以用在2d平面也可以用于3d，如果要构建3d，需要使用transform-style告诉浏览器2d变换还是3d变换。
至此，一个基本的3d已经可以完成
接下来应用在一个立体翻页的例子。
#My3dviewer{
-webkit-perspective:800px;
-webkit-perspective-orgin:50%,50%;
overflow: hidden;
}
#pagegroup{
-webkit-transform-style: preserve-3d;
position: relative;
height: 400px;
width: 400px;
background-color: black;
}
.page{
position: absolute;
-webkit-transform-origin:bottom;
height: 360px;
width: 360px;
padding: 20px;
text-align: center;
font-size: 360px;
color: white;
-webkit-transition:-webkit-transform .2s;
}
.page1{
-webkit-transform:rotateX(0deg);
}
.page2,.page3,.page4,.page5,.page6{
-webkit-transform:rotateX(90deg);
}
<div id="My3dviewer">
<div id="pagegroup">
<div class="page page1">1</div>
<div class="page page2">2</div>
<div class="page page3">3</div>
<div class="page page4">4</div>
<div class="page page5">5</div>
<div class="page page6">6</div>
</div>
</div>
<div id="option">
<a href="javascript:next()">next</a>
<a href="javascript:prev()">prev</a>
</div>
