之前講了css3的立方體實現，同時又講了backface-vibility屬性。這時候這倆結合，可以做一個很好玩的東西。

這里先看下最終要實現的效果：
效果，代碼 在這里

1.gif

1. 把立方體的每個對應面的位置進行對調（比如面1放到了后面，面3放到了前面）。
2. 對調后當前位置的面與對調前那個面的角度剛好相反（比如對調后的面3現在在前面，但它還是反面）
3. 給每個面設置backface-visibility屬性 從而達到視角被包圍住的感覺。

先把每個面的位置進行對調。
先對面1和面3進行改造：

面1原本的css
.slide1{
        transform:rotateY(0deg) translateZ(150px);
        -webkit-transform:rotateY(0deg) translateZ(150px);
        background: green;
    }
修改后：
.slide1{
        transform:rotateY(0deg) translateZ(-150px);
        -webkit-transform:rotateY(0deg) translateZ(-150px);
        background: green;
   }

這時候的頁面效果：（為了排除面3的干擾，已經把面3進行了隱藏）

1.gif

接下來對面3也進行類似的操作

面3原本的css
 .slide3{
        transform: rotateY(180deg) translateZ(150px);
        -webkit-transform: rotateY(180deg) translateZ(150px);
        background: #00A2E8;
    }
修改后：
 .slide3{
        transform: rotateY(180deg) translateZ(-150px);
        -webkit-transform: rotateY(180deg) translateZ(-150px);
        background: #00A2E8;
    }

這時候的效果（也是為了消除影響，把面1進行了注釋）

1.gif

1.gif

1.gif

這里有問題了

我把立方體的大小設置了足夠大（1000px）,可是在頁面上發現大小生效的不符合預期，而且位置還有所偏離。下圖這樣

Paste_Image.png

那么問什么會出現這個問題以及該怎么解決呢。是因為我沒有給立方體設置居中（這不尷尬了）。

居中之后，剩下的事情，就是拉近視角了,也就是translateZ

這時候本來是要給立方體的父級加tranlateZ 可是景深如果跟translateZ在一個層級或者同一個dom上的時候，景深是沒有效果的，也就是表現出來的樣子是translateZ直接無效。 所以這時候要給立方體外面再去加一個dom 專門去做拉伸視角的事情。

我新增了dom，這時候有發現了問題,為啥這個dom的高度會不受控制呢

（即不是100vh，寫100%也是無效的）

Paste_Image.png

排查了好久，發現了問題：

里面的dom有個數值很高的margin-top， 這個margin-top對父級造成了這個影響。

一開始想了兩個辦法：

1. 不用margin-top，而是通過flex布局來對立方體進行居中。
2. 給父級設置top bottom left right

這時候又發現了一個新坑。

flex布局下 div本身大小就發生了變化，且這個用flex的其他屬性調 是沒法調成預期的樣子，無奈只能用第二種辦法。

Paste_Image.png

修改好后，下圖是這個階段的圖，符合預期。

Paste_Image.png

這時候就要進行視角的拉伸了，這個好做。
給立方體的附近設置translateZ
在給設置了translateZ translate-style之后突然發現東西咋都不見了

Paste_Image.png

這里有點跟想象中的有點不一樣，按理說子節點應該在父節點上層而不是下層。
可是我在這里給子節點不管是設置z-index(明知道沒用）和translateZ，都沒辦法把子節點給挪到上層。
這個真不知道是為什么- -

Paste_Image.png

這時候把這個紫色背景色給去掉，然后把這個節點的translateZ給提升transform: translateZ(1200px);。
會是這樣子的效果：

1.gif