本文章取材于網(wǎng)上教程和css3官方文檔
在網(wǎng)頁上構(gòu)建3d蛋济，實際就是將瀏覽器看成一個窗口海诲，透過窗口去看里面的三維立體华望，從而將二維平面變成了三維平面希停。而css3提供了相對應(yīng)的方法盯捌。
首先是perspective和perspective-origin屬性淳衙。這兩個屬性是構(gòu)建所謂的窗口。
perspective 規(guī)定了窗口到三維立體的距離饺著，官方文檔的解釋是指定觀察者與「z=0」平面的距離箫攀，使具有三維位置變換的元素產(chǎn)生透視效果。
而perspective-origin就是人看這個窗口的位置幼衰，官方文檔的說法是指定透視點的位置靴跛。
該屬性提供2個參數(shù)值。如果提供兩個渡嚣，第一個用于橫坐標梢睛，第二個用于縱坐標。
如果只提供一個识椰，該值將用于橫坐標绝葡；縱坐標將默認為center。接下來確定了窗口腹鹉，就要通過使用transform屬性對三維立體圖形進行變換藏畅。在css3里，transform常用有三個語法(實際還有兩個功咒，扭曲和矩陣)愉阎，一個是translate()即平移，一個是rotate()即旋轉(zhuǎn)力奋，一個是scale()即縮放榜旦。
而transform既可以用在2d平面也可以用于3d，如果要構(gòu)建3d景殷，需要使用transform-style告訴瀏覽器2d變換還是3d變換溅呢。
至此，一個基本的3d已經(jīng)可以完成
接下來應(yīng)用在一個立體翻頁的例子滨彻。
#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>
