好程序員web前端系列之CSS3-3D

好程序員web前端系列之CSS3-3D，什麼是3d的場景呢？ 2d場景，在屏幕上水平和垂直的交叉線x軸和y軸
3d場景，在垂直於屏幕的方法，相對於3d多出個z軸 
Z軸：靠近屏幕的方向是正向，遠離屏幕的方向是反向 

CSS3中的3D變換主要包括如下幾種功能函數： 3D位移：CSS3中的3D位移主要包括translateZ()和translate3d()兩個功能函數；  3D旋轉：CSS3中的3D旋轉主要包括rotateX()、rotateY()、rotateZ()和rotate3d()四個功能函數；  3D縮放：CSS3中的3D縮放主要包括scaleZ()和scale3d()兩個功能函數；

景深

生活中的3d 區別於2d的地方

近大遠小 景深
程序中實現的方法 perspective 元素距離 視線的距離（物體和眼睛的距離越小，近大遠小的效果越明顯）perspective: 1200px;（在父元素中使用）transform:perspective(1200px) （在子元素中使用）兩個都設置會發生衝突，建議只設置父元素，一般的數值在900-1200之間 
若是當你的視線距離物體足夠遠的時候，基本上就不會有近大遠小的感受

perspective-origin;

觀察3d元素的（位置）角度 perspective-origin：center center （中心）
perspective-origin：left top （左上角）
perspective-origin：100% 100% （右下角）

transform-style屬性

transform-style屬性是3D空間一個重要屬性，指定嵌套元素如何在3D空間中呈現。他主要有兩個屬性值：flat和preserve-3d其中flat值爲默認值，表示全部子元素在2D平面呈現。preserve-3d表示全部子元素在3D空間中呈現。
也就是說，若是對一個元素設置了transform-style的值爲flat，則該元素的全部子元素都將被平展到該元素的2D平面中進行呈現。沿着X軸或Y軸方向旋轉該元素將致使位於正或負Z軸位置的子元素顯示在該元素的平面上，而不是它的前面或者後面。若是對一個元素設置了transform-style的值爲preserve-3d，它表示不執行平展操做，他的全部子元素位於3D空間中。 

3d重要功能函數

一、 3D位移

在CSS3中3D位移主要包括兩種函數translateZ()和translate3d()。translate3d()函數使一個元素在三維空間移動。 
語法：translate3d(tx,ty,tz) tx：表明橫向座標位移向量的長度；
 ty：表明縱向座標位移向量的長度；
 tz：表明Z軸位移向量的長度。此值不能是一個百分比值，若是取值爲百分比值，將會認爲無效值。 


ranslateZ()函數的功能是讓元素在3D空間沿Z軸進行位移。語法：translateZ(t) t：指的是Z軸的向量位移長度。

二、 3D旋轉

在三維變形中，咱們可讓元素在任何軸旋轉。爲此，CSS3新增三個旋轉函數：rotateX()、rotateY()、rotateZ()和rotate3d(x,y,z,a)。

rotateX(a)

rotateX()函數指定一個元素圍繞X軸旋轉，旋轉的量被定義爲指定的角度；若是值爲正值，元素圍繞X軸順時針旋轉；反之，若是值爲負值，元素圍繞X軸逆時針旋轉。

rotateY(a)

rotateY()函數指定一個元素圍繞Y軸旋轉，旋轉的量被定義爲指定的角度；若是值爲正值，元素圍繞Y軸順時針旋轉；反之，若是值爲負值，元素圍繞Y軸逆時針旋轉。

rotateZ(a)

rotateZ()函數和其餘兩個函數功能同樣的，區別在於rotateZ()函數指定一個元素圍繞Z軸旋轉。

rotate3d(x,y,z,a)

x：是一個0到１之間的數值，主要用來描述元素圍繞X軸旋轉的矢量值；
y：是一個０到１之間的數值，主要用來描述元素圍繞Y軸旋轉的矢量值；
z：是一個０到１之間的數值，主要用來描述元素圍繞Z軸旋轉的矢量值；
a：是一個角度值，主要用來指定元素在3D空間旋轉的角度，若是其值爲正值，元素順時針旋轉，反之元素逆時針旋轉。 

三、 3D縮放

CSS3 3D變形中的縮放主要有scaleZ()和scale3d()兩種函數，當scale3d()中X軸和Y軸同時爲1，即scale3d(1,1,sz)，其效果等同於scaleZ(sz)。經過使用3D縮放函數，可讓元素在Z軸上按比例縮放。默認值爲１，當值大於１時，元素放大，反之小於１大於0.01時，元素縮小

scale3d(sx,sy,sz)

 sx：橫向縮放比例；
 sy：縱向縮放比例；
 sz：Z軸縮放比例；

scaleZ(s)

s：指定元素每一個點在Z軸的比例。 
注：scaleZ()和scale3d()函數單獨使用時沒有任何效果，須要配合其餘的變形函數一塊兒使用纔會有效果