事實(shí)上，在三維引擎里，三維物體也不是實(shí)體，它們都是由一系列平面（多邊形）所圍成的（并可以在平面上添加紋理和貼圖）。

現(xiàn)在來做一個(gè)正方體，現(xiàn)在先不用考慮perspective。正方體有六個(gè)面，然后需要用一個(gè)元素來裝這六個(gè)面，所以html是：

    
1
    
2
    
3
    
4
    
5
    
6

對(duì)應(yīng)的css是（邊長120px，省略瀏覽器私有前綴，后文同）：

.cube{
    position: absolute;
    transform-style: preserve-3d;
}
.cube .surface{
    position: absolute;
    width: 120px;
    height: 120px;
    border: 1px solid #ccc;
    background: rgba(255,255,255,0.8);
    box-shadow: inset 0 0 20px rgba(0,0,0,0.2);
    line-height: 120px;
    text-align: center;
    color: #333;
    font-size: 100px;
}
.cube .surface-1 {
    transform: translateZ(60px);
}
.cube .surface-2 {
    transform: rotateY(90deg) translateZ(60px);
} 
.cube .surface-3 {
    transform: rotateX(90deg) translateZ(60px);
}
.cube .surface-4 {
    transform: rotateY(180deg) translateZ(60px);
}
.cube .surface-5 {
    transform: rotateY(-90deg) translateZ(60px);
}
.cube .surface-6 {
    transform: rotateX(-90deg) translateZ(60px);
}

其中，transform-style: preserve-3d;保證所有子元素都處于同一個(gè)三維空間（這里是三維渲染上下文3D rendering context）內(nèi)，也就是告訴瀏覽器你是想用這些元素做一個(gè)三維場景，而不僅僅只是要單個(gè)元素的簡單三維效果。

position: absolute;是一個(gè)習(xí)慣做法，因?yàn)槿S物體并不符合一般平面網(wǎng)頁內(nèi)容的排版，所以我們會(huì)比較多地希望它不要占據(jù)布局空間。

6個(gè)面位置都不一樣，但卻都有translateZ(60px);，你已經(jīng)知道這是因?yàn)榍擅畲钆淞嗽谒暗淖儞Q函數(shù)。

一旦構(gòu)成正方體的6個(gè)div.surface的位置確定后，就可以操作它們的父元素div.cube來整體移動(dòng)、旋轉(zhuǎn)這個(gè)正方體。

只是有了這樣的一個(gè)三維物體，我們就可以說有了一個(gè)三維場景了。但是，三維場景和平面圖不同，比如這個(gè)正方體，我從不同的位置，不同的角度去觀察它，我眼里看到的都是不一樣的：

那么，這樣的三維場景要如何呈現(xiàn)在平面的網(wǎng)頁里呢？

這就是三維引擎里的攝像機(jī)的概念來源了。就像電影里表現(xiàn)同一個(gè)場景會(huì)用不同的鏡頭那樣，我們需要定義場景里的攝像機(jī)來生成最終呈現(xiàn)在屏幕里的二維畫面。比如three.js里的攝像機(jī)是這樣的感覺：

這個(gè)圖里標(biāo)明的是攝像機(jī)定義時(shí)使用的參數(shù)，其中包括視野范圍，圖像寬高比等?？梢愿惺艿竭€是有很多內(nèi)容的。

相比之下，網(wǎng)頁里的三維場景攝像機(jī)就弱多了，你需要用的是perspective和perspective-origin。

perspective定義攝像機(jī)（也就是作為觀眾的我們）到屏幕的距離，perspective-origin定義攝像機(jī)觀察到的畫面中的滅點(diǎn)（vanishing point）的位置。雖然它們并不能方便地讓你直接定義攝像機(jī)的位置和觀察角度等，但只要適當(dāng)?shù)貞?yīng)用它們，是可以一定程度上控制攝像機(jī)的畫面效果的。

網(wǎng)頁里的攝像機(jī)一般是這樣用的：

.camera{
    position: relative;
    perspective: 1200px;
    perspective-origin: 50% 50%;
    transform-style: preserve-3d;
}

在網(wǎng)頁里，無論你搭建了怎樣的三維場景，只要你希望它顯示出來，就應(yīng)該像這樣把構(gòu)成場景的三維物體都放在一個(gè)容器元素里，然后為容器元素添加攝像機(jī)屬性（perspective和perspective-origin）。

此外，還需要注意添加transform-style: preserve-3d;以保證多個(gè)三維物體都位于同一空間（這樣才有三維引擎的味道，對(duì)吧？）。

下面這個(gè)場景里有三個(gè)正方體，然后攝影師正在做彈跳練習(xí)（限支持3d transform的瀏覽器）：

http://runjs.cn/detail/daqoq5tf

這段動(dòng)作的動(dòng)畫代碼是這樣：

.camera{
    animation: cameraMove 2s ease-out infinite alternate both;
}
@keyframes cameraMove{
    0%{
       perspective-origin: 50% 180px;
    }
    100%{
       perspective-origin: 50% -200px;
    }
}

可以看出，perspective-origin雖然是指三維透視的滅點(diǎn)的位置，但它的確和我們理解的攝像機(jī)的位置是緊密關(guān)聯(lián)的。如果攝像機(jī)在空間里的位置是(x, y, z)的話，perspective-origin的兩個(gè)值有一點(diǎn)像指定x和y的感覺。這里只說“有一點(diǎn)像”，是因?yàn)闇琰c(diǎn)位置和攝像機(jī)的位置畢竟是不同的概念，這可能還需要多看一些三維空間來體會(huì)。

那么，在上面的例子中，攝影師不只是這樣跳起來，而是想要向更深處前進(jìn)，應(yīng)該怎么做呢？

答案是，在網(wǎng)頁里，你不能這樣移動(dòng)攝像機(jī)，你需要換一個(gè)思路，參照相對(duì)運(yùn)動(dòng)的關(guān)系，改為讓整個(gè)三維場景向你移動(dòng)。不過，說到這里，前面提到的攝像機(jī)的另一個(gè)屬性，perspective，為什么它不行呢？

perspective代表攝像機(jī)距離屏幕的距離，看上去和z軸深度非常近似。但是，它并不等同于攝像機(jī)的z坐標(biāo)位置（perspective還只能取正值），而是會(huì)影響攝像機(jī)本身的其他屬性。下面用這個(gè)圖說明perspective的值變化的效果（修改自w3c的配圖）：

圖中d1和d2分別表示兩個(gè)不同的perspective的值，其中d2小于d1。然后，你會(huì)驚奇地發(fā)現(xiàn)，一個(gè)原本位于屏幕之后（z坐標(biāo)為負(fù)值）的物體，竟然是隨著“走近”而變得更小了！顯然，這不符合我們?cè)谌S空間里運(yùn)動(dòng)的基本感受。其原因是，網(wǎng)頁的三維投影平面是固定的，perspective在改變攝像機(jī)的位置的同時(shí)，也同時(shí)改變了攝像機(jī)本身的其他屬性（類似前面的three.js的攝像機(jī)那張圖里的各種參數(shù)）。

所以，一般來說，perspective應(yīng)維持一個(gè)固定的值。想要用3d transform做出在三維空間里自由移動(dòng)的效果（就像各種3d游戲），應(yīng)該通過相對(duì)運(yùn)動(dòng)的方法實(shí)現(xiàn)。

transform影響的是視覺渲染，而不是布局。因此，除以下情況外，transform不會(huì)影響到布局：

這個(gè)因?yàn)?b>overflow生成滾動(dòng)條從而影響布局的反例，也發(fā)生于position: relative;再進(jìn)行偏移的情況。

相對(duì)于transform的translate3d()這類改變空間位置的變換函數(shù)，原來css里就有的定位屬性left、top似乎會(huì)讓情況變得很復(fù)雜。

對(duì)此，有一個(gè)比較推薦的分析方式：就三維空間的位置而言，常規(guī)屬性left、top，甚至margin-left等，是先生效的，它們的效果其實(shí)只有一個(gè)，就是改變?cè)氐某跏嘉恢?，從而改變?cè)氐?b>transform-origin的那個(gè)原點(diǎn)位置，然后三維空間的transform是后生效的，它會(huì)再基于前面的transform-origin繼續(xù)改變位置。

現(xiàn)在你已經(jīng)了解到，perspective-origin是一個(gè)攝像機(jī)的屬性，定義的是透視畫面的滅點(diǎn)，而transform-origin是任意元素都有的，定義的是的元素的transform坐標(biāo)系的原點(diǎn)。

本文是我對(duì)目前網(wǎng)頁里用3d transform創(chuàng)建三維空間的總結(jié)，其中混入了一些三維引擎的知識(shí)，并對(duì)比著來一一說明。感覺3d transform還是有自己比較明確的定位的，雖然和三維引擎相比很簡陋，但它已經(jīng)足夠用來為網(wǎng)頁添加吸引人的三維效果。

如果你也想過用3d transform做稍復(fù)雜的三維空間，希望本文能有所幫助。

（重新編輯自我的博客，原文地址：http://acgtofe.com/posts/2015/12/xyz-3d-in-css）