Css+Html 特效實現3D旋轉愛心+立方體（一）



立方體

 需要考慮的因素:如何將平面的2D圖形轉換爲3D圖形。

 解決方法:

1. 先將平面上的6個DIV拼接在一起。形成一張類似由3d立方體圖形展開的平面圖。如圖所示:

知識點：將DIV合在一起，將會用到定位的知識，將立方體包起來需要一個大盒子DIV，所以總共需要7個DIV，這七個DIV，將以大盒子爲參考點（position:relative），剩下的6個子盒子，每一個都是絕對定位，定位在相應的位置上，定位完成後，就是上面的那個樣子。

這裏逐個定位比較麻煩，這裏可以使用css3的選擇器，講解如下：

E:nth-child(n) 選擇器用來定位某個父元素的一個或多個特定的子元素。其中「n」是其參數，而且可以是整數值(1,2,3,4)，也可以是表達式(2n+1、-n+5)和關鍵詞(odd、even)，但參數n的起始值始終是1，而不是0。也就是說，參數n的值爲0時，選擇器將選擇不到任何匹配的元素。比如：       p:nth-child(n){background:red}  表示E父元素中的第n個字節點       p:nth-child(odd){background:red}/*匹配奇數行*/       p:nth-child(even){background:red}/*匹配偶數行*/       p:nth-child(2n){background:red}/*其中n是從0開始計算*/      經驗與技巧:當「E:nth-child(n)」選擇器中的n爲一個表達式時，其中n是從0開始計算，當表達式的值爲0或小於0的時候，不選擇任何匹配的元素。

具體使用例子：

可以逐個定位每一個子盒子啦，是不是更方便啦，

這樣第一步就完成了。（注意，爲了後面更好的觀察這個立方體，我們應該將這個圖形居中方式，提倡方式：margin：垂直間距  auto ）。

2）我們需要將每一個面旋轉到相應的位置上。每一個面的旋轉軸都是不一樣的。上下，左右，分別對應的旋轉軸,以及旋轉角度分別是：bottom(90deg),top(-90deg),right(90deg),left(-90deg),

以上邊爲例，css3代碼如下：

值得注意的是：在旋轉後面的時候。旋轉軸爲Z軸，並不是上下，左右邊。首先我們來了解一下瀏覽器上面的座標系。

其中Z軸是屏幕裏外兩個方向（向外爲正，向裏爲負），X軸的水平方向（向右爲正，向左爲負），Y軸的豎直方向（向下爲正，向上爲負）。

瞭解完上面的知識後，就可以實現將後邊的面向裏移動啦，通俗來說，就是將「後」面沿着Z軸向裏移動整個Div的寬度，大小，CSS3代碼如下：

完成第二步的操作後，就會達到下面的效果。

3）第三步呢，就是最關鍵的步驟啦，需要爲body加上perspective(景深，簡單來說就是設置元素被查看位置的視圖，範圍在800-1000px),

注意：這裏是爲body標籤加上這個屬性，並不是給整個立方體的大盒子加上這個屬性，因爲我們得從比自身更高的一個地方去查看這個圖形，（俗話說，站得高，才能看得遠嘛。），示例代碼：

接下來我們要做的就是設置一下所處環境，當然，這個地方我們要設置成3D的環境啦，具體的語法形式如下：

然後我們讓立方體旋轉起來，以便更好的觀察3D效果。首先找到旋轉中心（這裏的旋轉中心是立方體的幾何中心，）

加上動畫過渡，以及旋轉角度和旋轉軸就搞定咯。

動畫過渡時間； 旋轉軸爲Y軸，以及角度：

動畫效果：

一個網頁版的立方體就做好啦。