之前講了css3的立方體實(shí)現(xiàn)，同時(shí)又講了backface-vibility屬性。這時(shí)候這倆結(jié)合，可以做一個(gè)很好玩的東西励负。

這里先看下最終要實(shí)現(xiàn)的效果：
效果，代碼 在這里

1.gif

1. 把立方體的每個(gè)對(duì)應(yīng)面的位置進(jìn)行對(duì)調(diào)（比如面1放到了后面匕得，面3放到了前面）继榆。
2. 對(duì)調(diào)后當(dāng)前位置的面與對(duì)調(diào)前那個(gè)面的角度剛好相反（比如對(duì)調(diào)后的面3現(xiàn)在在前面，但它還是反面）
3. 給每個(gè)面設(shè)置backface-visibility屬性 從而達(dá)到視角被包圍住的感覺汁掠。

先把每個(gè)面的位置進(jìn)行對(duì)調(diào)略吨。
先對(duì)面1和面3進(jìn)行改造：

面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;
   }

這時(shí)候的頁面效果：（為了排除面3的干擾，已經(jīng)把面3進(jìn)行了隱藏）

1.gif

接下來對(duì)面3也進(jìn)行類似的操作

面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;
    }

這時(shí)候的效果（也是為了消除影響考阱，把面1進(jìn)行了注釋）

1.gif

1.gif

1.gif

這里有問題了

我把立方體的大小設(shè)置了足夠大（1000px）,可是在頁面上發(fā)現(xiàn)大小生效的不符合預(yù)期考榨，而且位置還有所偏離。下圖這樣

Paste_Image.png

那么問什么會(huì)出現(xiàn)這個(gè)問題以及該怎么解決呢鹦倚。是因?yàn)槲覜]有給立方體設(shè)置居中（這不尷尬了）河质。

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

這時(shí)候本來是要給立方體的父級(jí)加tranlateZ 可是景深如果跟translateZ在一個(gè)層級(jí)或者同一個(gè)dom上的時(shí)候掀鹅，景深是沒有效果的散休，也就是表現(xiàn)出來的樣子是translateZ直接無效。 所以這時(shí)候要給立方體外面再去加一個(gè)dom 專門去做拉伸視角的事情乐尊。

我新增了dom戚丸，這時(shí)候有發(fā)現(xiàn)了問題,為啥這個(gè)dom的高度會(huì)不受控制呢

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

Paste_Image.png

排查了好久扔嵌，發(fā)現(xiàn)了問題：

里面的dom有個(gè)數(shù)值很高的margin-top昏滴， 這個(gè)margin-top對(duì)父級(jí)造成了這個(gè)影響。

一開始想了兩個(gè)辦法：

1. 不用margin-top对人，而是通過flex布局來對(duì)立方體進(jìn)行居中。
2. 給父級(jí)設(shè)置top bottom left right

這時(shí)候又發(fā)現(xiàn)了一個(gè)新坑拂共。

flex布局下 div本身大小就發(fā)生了變化牺弄，且這個(gè)用flex的其他屬性調(diào) 是沒法調(diào)成預(yù)期的樣子，無奈只能用第二種辦法宜狐。

Paste_Image.png

修改好后势告，下圖是這個(gè)階段的圖，符合預(yù)期抚恒。

Paste_Image.png

這時(shí)候就要進(jìn)行視角的拉伸了咱台，這個(gè)好做。
給立方體的附近設(shè)置translateZ
在給設(shè)置了translateZ translate-style之后突然發(fā)現(xiàn)東西咋都不見了

Paste_Image.png

這里有點(diǎn)跟想象中的有點(diǎn)不一樣，按理說子節(jié)點(diǎn)應(yīng)該在父節(jié)點(diǎn)上層而不是下層混萝。
可是我在這里給子節(jié)點(diǎn)不管是設(shè)置z-index(明知道沒用）和translateZ遗遵，都沒辦法把子節(jié)點(diǎn)給挪到上層。
這個(gè)真不知道是為什么- -

Paste_Image.png

這時(shí)候把這個(gè)紫色背景色給去掉逸嘀，然后把這個(gè)節(jié)點(diǎn)的translateZ給提升transform: translateZ(1200px);车要。
會(huì)是這樣子的效果：

1.gif