初識CSS3 3D效果,淺談理解


剛接觸完css3的3D變換,感覺確實十分華麗,趁着熱乎勁,把感想和理解記錄下來。如有不對,歡迎指正。

CSS3中提供了2D和3D兩種變換方式,所謂的變換主要就是位移和旋轉,2D和3D的區別大概就是有沒有Z軸方向的變換,僅此而已。

所以,為了后面更好的理解3D變換,我們先說一說2D的變換。

translate()和rotate()

上面兩種方法是2D變換的常用方法,一個對應位移,一個對應旋轉,當然還有其他的,這里就不展開,先只說說這兩個。具體語法是這樣的,比如我們想變換一個div。

#div1{transform:translate(100px,100px);}
#div2{transform:rotate(50deg);}

transform是css3提供的一個屬性,專門用於圖形變換,這個屬性現在可能得到了大部分瀏覽器的支持,但3D效果用到的后面幾種屬性,還是需要做兼容,為了節省時間,討論技術本身,后面就不照顧兼容了。

言歸正傳,上面兩個方法光從參數也很容易理解,translate()是位移方法,分別朝x軸方向,y軸方向移動一段距離,距離可以為負。rotate()是旋轉方法,會繞原點順時針旋轉一個角度。那么問題來了,原點在哪?既然是變換,必須得有參考系,這才有准確的變換效果,所以,無論2D還是3D,找准坐標系,找准坐標系,找准坐標系。因為很重要,所以說三遍。

一般來說,原點默認為元素中心點,當然這個原點也是可以調整的,通過這個屬性 transform-origin:50% 50%; 這里的50% 50%表示的就是中心默認的位置,可以改成其他的,比如說左上角就應該寫成 tansform-origin:0% 0%;  這樣就可以調整原點了。

transform屬性

了解完2D,進階一下,transform屬性同樣可以進行3D變換,簡單來說就是分別針對x,y,z進行設置。

#div1{

  transform:translateX(100px) translateY(100px) translateZ(100px) rotateX(30deg) rotateY(30deg) rotateZ(30deg);

}

旋轉部分,需要特別說明一下,rotateX()表示繞X軸旋轉的角度,這個變換,整個坐標系會跟着一起旋轉,所以找不到原點得是多糟糕的事情,坐標系永遠是跟隨我們的元素的,每個元素都有自己的坐標,以初始狀態來說,原點在元素中心,x軸正方向從原點水平向右,y軸正方向從原點豎直向下,z軸正方向則是從原點朝向我們的屏幕,也就是說,我們的元素正對的方向就是它自己的z軸方向,這一點千萬要記好。

因為transform歸根結底只是個屬性,所以重復的transform只會覆蓋,縮寫形式就是上面這種,需要注意的是中間用空格隔開而不是逗號。另外,個人理解,transform從中文上來說,應該是“變換成”,而不是“變換”,它表現的是變換完成之后的樣子。

透鏡,模擬出來的3D效果

完成了上面的變換,有3D效果了么,我們看個demo。

這里還沒有進行變換,接下來我們加入變換的屬性。

我們發現,它確實變形了,但是,和我們想象中的3D效果相差甚遠,甚至可以說完全是一個平面效果啊。

其實css3的3D效果,是靠瀏覽器通過計算,渲染,最后模擬出來的一個三維效果。如果要模擬的像,可以欺騙人的眼睛,那必須要考慮一個東西,就是透視,或者說景深,再通俗點就是近大遠小。只有滿足這個,css3的3D變換才有3D的效果,不然即使確實進行了3D變換,瀏覽器也會把它投影成一個平面的,完全沒有3D效果。那怎么給它增加一個透視或者說景深呢,很簡單,一個屬性就可以搞定。

perspective:500;

perspective屬性就是所謂的透鏡屬性,后面的數字單位是像素,用來模擬視角離元素的距離,給最外圍的元素設定好這個屬性,里面的元素在景深方向有所變換時,就能准確表現出近大遠小。

我們來試一下。

OK,完美,一個平面的元素,現在獲得了3D的變換效果,通過幾個div的不同的旋轉變換,和位移,我們很容易就組合出一個正方體,這里的話要注意坐標系會跟着元素一起動的,不過它的Z軸方向一定是div正面朝向的位置,為什么一定要強調正面,是因為3D變換可以讓他旋轉180度,它的背面可以被我們看到,這個時候,Z軸方向就相反了。而正面,就是我們可以放內容的那個面。

透鏡,舞台,組合體

如果我們組合出了一個立方體,想要它動起來,該怎么做?“立方體”是由6個div拼成,每個又有自己獨立的坐標系,通過統籌他們協作變換完成這個效果,想想都讓人覺得不可能。那有沒有簡單的方法,有,給組合體外面套一個div,我們只要旋轉變換它,里面的子元素,自然也跟着旋轉了。所以,在我的理解里,組合體就是一個不能運動的死物,想要動效的話,就得給它們一個“舞台”,我們通過操作舞台,就可以全方位展示,運動我們的組合體。所以我們獲得了一個三層結構,最外層的透鏡,里面的舞台,和舞台里的組合體。在一些大牛的博客里,可能更傾向於把它們叫做“鏡頭”,“空間”和“物體”。這個就是實現3D效果的基礎。

最后一點東西,“保留3D位置”

我最后完成了一個立方體,並用一個div作為舞台包裹了它,想通過旋轉舞台,看看其他角度的立方體,結果出現了這個情況。

立方體變成了一個平面了!為什么會這樣?其實細想一下也很容易理解,div本來就是一個平面元素,所以立方體直接被它“壓扁”了。舞台空間不夠,也就裝不下我們的展示物,所以我們要給舞台擴容,給它添加一個屬性就可以解決這個問題。

transform-style:preserve-3d;

這個屬性的意思是,給子元素保留3D位置,如果你不設定,那就默認不保留,也就是子元素都以平面顯示。

添加完這個屬性我們來看一下。

OK,立方體就出來了。

 

以上就是我對最基礎3D效果的理解,3D效果當然不可能全都這么簡單,有一些東西我沒有涉及,比如perspective-origin,體會不深不敢妄談,而且許多3D技巧我還沒有掌握,后面如果再有所體會,一定分享經驗。

 

打賞

免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2021 CODEPRJ.COM