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

昨天transform的筆記在這里

源碼在這里可以看到

閉眼5秒鐘腦子里預(yù)演了一遍大概咋寫，然后就認(rèn)為自己已經(jīng)可以寫出來了。

今天強(qiáng)迫自己去用手給實(shí)現(xiàn)一遍，結(jié)果發(fā)現(xiàn)

懶惰和盲目自信又一次讓自己有了“這我也會(huì)”的錯(cuò)覺

第一次懵逼

發(fā)現(xiàn)的問題有好多：

為什么只展現(xiàn)出來一個(gè)面？

為什么動(dòng)畫效果顯示出來的是平面

先解決第一問題：

先要明確一點(diǎn)： 要實(shí)現(xiàn)3d效果，在transform-origin這個(gè)屬性上必須要寫上第三個(gè)參數(shù)。

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

于是給container加上 perspective:200px;

這時(shí)候的效果圖如下：

1.gif

第一個(gè)問題解決。

再看第二個(gè)問題：

為什么動(dòng)畫效果顯示出來的是一個(gè)平面？

這個(gè)我想到了昨天筆記里的這個(gè)效果

123

會(huì)不會(huì)也是因?yàn)樵谛D(zhuǎn)container的時(shí)候，它的子元素(也就是每一個(gè)面)的3d變化都沒保存所導(dǎo)致的。

于是我試著在container上加了

transform-style:preserve-3d

效果圖如下

1.gif

意外發(fā)現(xiàn)那個(gè)消失的1面(正面)也顯示出來了。

第二次懵逼

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

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

盯著看了好久，發(fā)現(xiàn)一個(gè)問題： 由于加了景深的緣故，每一個(gè)面的大小貌似已經(jīng)固定。

拿左側(cè)右側(cè)的兩面來說：

預(yù)期是：效果是近大遠(yuǎn)小的梯形效果，但具體形狀還是矩形。

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

通過上面這個(gè)發(fā)現(xiàn)，猜測了下css實(shí)現(xiàn)景深效果的一部分原理也不知道對不對：根據(jù)幾何學(xué)的公式將平面的dom轉(zhuǎn)換為符合視覺效果的另一種圖形從而達(dá)到景深的效果。

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

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

.container{

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

}

效果如下

1.gif

這里有沒有發(fā)現(xiàn)一個(gè)問題：

在一開始只有一個(gè)面3能顯示出來時(shí)候，靠加景深css來讓其他面展現(xiàn)出來，而現(xiàn)在卻要?jiǎng)h掉這個(gè)屬性。

而刪掉這個(gè)屬性后，發(fā)現(xiàn)頁面展現(xiàn)并沒有回到上面最開始的那個(gè)樣子。

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

那現(xiàn)在就要考慮怎么樣做，才能實(shí)現(xiàn)符合預(yù)期的景深效果

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

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

既然景深會(huì)影響到子元素的transform的變換結(jié)果，那如果子元素不變換呢。

所以試著這樣寫：

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

效果圖如下：

1.gif

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

transform-origin: center center -75px;

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

最后，看效果：

1.gif

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

作為一個(gè)跟瀏覽器打交道的人，應(yīng)該是很煩那種PC端完美但移動(dòng)端迷之bug的情況。

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

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

Paste_Image.png

在排查代碼的時(shí)候，發(fā)現(xiàn)我的正面(也就是面1)沒有設(shè)置rotate，因?yàn)榘蠢碚f，它設(shè)置成rotate(0)和不設(shè)置在表現(xiàn)上是沒區(qū)別的。試著給這個(gè)面也加了rotate之后，ios上的效果有所改觀。

1.gif

這時(shí)候發(fā)現(xiàn)面1 的問題是已經(jīng)解決了，可旋轉(zhuǎn)的樣子跟pc上的最終效果還是有很大差距。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。