css3 - 3D transform 變化

標籤：style   c   class   blog   code   java   

3d 視圖效果，x/y/z軸的說明圖

1 rotateX( angle )2 rotateY( angle )3 rotateZ( angle )4 rotate旋轉的意思，rotateX旋轉X軸，rotateY旋轉Y軸，rotateZ旋轉Z軸

 

rotateX、rotateY、rotateZ、rotate3d 旋轉的效果說明圖

 

必不可少的 perspective 屬性

1 perspective的中文意思是：透視，視角！2 perspective屬性的存在與否決定了你所看到的是2次元的還是3次元的，也就是是2D transform還是3D transform. 這不難理解，沒有透視，不成3D.perspective：none | <length><length>值越大，角度出現的越遠，從而建立一個相當低的強度和非常小的3D空間變化。反之，此值越小，角度出現的越近，從而建立一個高強度的角度和一個大型3D變化perspective取值越小，3D效果就越明顯，也就是你的眼睛越靠近真3D

 

translateZ

設定3D視點perspective，旨在設定使用者有畫布的視距使用translateZ()函數可以讓元素在Z軸進行位移，當其值為負值時，元素在Z軸越移越遠，導致元素變得較小。反之，當其值為正值時，元素在Z軸越移越近，導致元素變得較大

 

perspective-origin

perspective-origin這個屬性超級好理解，表示你那雙眼睛看的位置。預設就是所看舞台或元素的中心

 

transform-style: preserve-3d

transform-style屬性也是3D效果中經常使用的，其兩個參數，flat|preserve-3d. 前者flat為預設值，表示平面的；後者preserve-3d表示3D透視。基本上，我們想要根據現實經驗實現一些3D效果的時候，transform-style: preserve-3d是少不了的。一般而言，該聲明應用在3D變換的兄弟元素們的父元素上，也就是舞台元素。

 

backface-visibility

在顯示世界中，我們無法穿過軟妹A看到其身後的軟妹B或C或D；但是，在CSS3的3D世界中，預設情況下我們是可以看到背後的元素因此，為了切合實際，我們常常會這樣設定，使後面元素不可見backface-visibility:hidden;backface-visibility屬性決定元素旋轉背面是否可見。對於未旋轉的元素，該元素的正面面向觀看者。當其Y軸旋轉約180度時會導致元素的背面面對觀眾。該屬性被設定為以下兩個關鍵詞之一：visible：為backface-visibility的預設值，表示反面可見hidden：表示反面不可見

 

內容轉自：http://www.zhangxinxu.com/和http://www.w3cplus.com/css3/css3-3d-transform.html