css3构建3D效果

本文章取材于网上教程和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>