昨天看過在看完transform后，想做一個正方體的效果。

昨天transform的筆記在這里

源碼在這里可以看到

閉眼5秒鐘腦子里預演了一遍大概咋寫，然后就認為自己已經可以寫出來了。

今天強迫自己去用手給實現一遍，結果發現

懶惰和盲目自信又一次讓自己有了“這我也會”的錯覺

第一次懵逼

發現的問題有好多：

為什么只展現出來一個面？

為什么動畫效果顯示出來的是平面

先解決第一問題：

先要明確一點： 要實現3d效果，在transform-origin這個屬性上必須要寫上第三個參數。

給面3設置的是ratateY(180deg)，在確保上面這個沒問題之后，可是效果看上去這個面只是進行了翻轉而并沒有變遠。 所以這時候要考慮是不是沒有開啟景深的原因

于是給container加上 perspective:200px;

這時候的效果圖如下：

1.gif

第一個問題解決。

再看第二個問題：

為什么動畫效果顯示出來的是一個平面？

這個我想到了昨天筆記里的這個效果

123

會不會也是因為在旋轉container的時候，它的子元素(也就是每一個面)的3d變化都沒保存所導致的。

于是我試著在container上加了

transform-style:preserve-3d

效果圖如下

1.gif

意外發現那個消失的1面(正面)也顯示出來了。

第二次懵逼

雖然是3d效果了，可是這個效果跟想象中的有點不一樣啊(簡直就是完全不一樣)。

想了好久，不知道問題出在了哪里。

盯著看了好久，發現一個問題： 由于加了景深的緣故，每一個面的大小貌似已經固定。

拿左側右側的兩面來說：

預期是：效果是近大遠小的梯形效果，但具體形狀還是矩形。

可實際卻是： 每一個面的形狀已經在形成視覺效果時候便已經固定(左右兩個面已經不是梯形而是矩形。)

通過上面這個發現，猜測了下css實現景深效果的一部分原理也不知道對不對：根據幾何學的公式將平面的dom轉換為符合視覺效果的另一種圖形從而達到景深的效果。

舉個例子就是矩形左右兩側，瀏覽器只是根據幾何學把兩個矩形變成了符合視覺預期的梯形，讓立方體有里景深的效果。

既然有了上面這個猜測，那就試著先把容器的景深給去掉

.container{

---------perspective:XXX

}

效果如下

1.gif

這里有沒有發現一個問題：

在一開始只有一個面3能顯示出來時候，靠加景深css來讓其他面展現出來，而現在卻要刪掉這個屬性。

而刪掉這個屬性后，發現頁面展現并沒有回到上面最開始的那個樣子。

看了下代碼，發現是transform-style起了作用。這個css的作用本身就保留子元素(不是子孫元素)的3d變化。所以子元素的rotate符合預期沒出現偏差。

那現在就要考慮怎么樣做，才能實現符合預期的景深效果

具體咋做，我看了教程上的做法。但教程上并沒有說為啥要這么做，很自然的這么寫了

又一次證明 啥事還是要親自來一遍。

既然景深會影響到子元素的transform的變換結果，那如果子元素不變換呢。

所以試著這樣寫：

在container的外面再包一層dom，然后景深的css屬性放到這個dom上

效果圖如下：

1.gif

實現真3d了，可是在旋轉的時候有點怪怪的，多看幾遍發現正方體的旋轉點為面1的中心。而預期的效果則是圍繞著正方體的中心旋轉。 所以這時候可以給旋轉的那個dom(也就是container)加上變換中心點的樣式：

transform-origin: center center -75px;

這里要說的是 transform-origin:center center ???px 這里的px是多少呢。 自己試一試算一算，會發現 這里填成立方體的長的一半最合適。

最后，看效果：

1.gif

以上均是看妙味課程后的筆記。 妙味大法好！

作為一個跟瀏覽器打交道的人，應該是很煩那種PC端完美但移動端迷之bug的情況。

上面這個圖是在PC上開發時候截的圖，多完美，而下圖是在ios上截的圖。(安卓沒出問題)

為啥是這樣子的，很煩。很煩。

Paste_Image.png

在排查代碼的時候，發現我的正面(也就是面1)沒有設置rotate，因為按理說，它設置成rotate(0)和不設置在表現上是沒區別的。試著給這個面也加了rotate之后，ios上的效果有所改觀。

1.gif

這時候發現面1 的問題是已經解決了，可旋轉的樣子跟pc上的最終效果還是有很大差距。

總結

以上是生活随笔為你收集整理的用css如何写正方体,css正方体实现--（transform练习）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。