首先要和大家分享的是，如何使用div+css建立三角形。在這裡我先把相關代碼粘貼出來，然後再為大家講解原理。
html代碼中我們定義了兩個div，外部div是容器對象，内部div用來生成三角形。css代碼中，我們沒有為内部div設定寬度和高度，隻設定了border三個邊的寬度（上、下和左）。通過為三個邊設定不同顔色，他們會分别變成三個不同的三角形。
這時，我們隻需要簡單的将上下兩邊的顔色設定為透明色，一個等邊三角形就出現了。
效果圖：
其中，紅圈所示的地方就是内部div所在位置。他是個看不見的，0寬度0高度，但又實際存在的對象。
我們接下來要講的是如何實作3d四面體和如何建立動畫。
首先還是粘貼相關的代碼。
現在開始相關代碼的講解。
html代碼和之前的差不多，就是多了三個div，分别作為四面體的另外三個面。
css代碼中，我們使用 #pyramid > div:nth-child(n) 尋找到三面體的四個面，設定border四個邊的顔色，将他們分别定義成三角形。通過transform屬性的rotateX，rotateY，translateX，translateY和translateZ方法，設定他們在3維空間中的角度、朝向和位置。這裡涉及到很多數學知識，大家需要去補充相關知識。
本文到此為止，大家可以把html和css代碼粘貼在一起，檢視最終效果。
代碼裡面有不懂的内容，大家可以給我留言。
<a href="http://www.vancl.com/?source=kbh1983&sourcesuninfo=ad-3090-1-52-0-1" target="_blank"></a>