在瀏覽器中，X軸是從左到右，Y軸是從上到下，Z軸是從裡到外

景深

perspective(n)為 3D 轉換元素定義透視檢視

　　perspective的中文意思是：透視，視角。

　　沒有透視定義，不成3D。

　　下圖為透視的一張圖：

　　CSS3中3D transform的透視點是在瀏覽器的前方！

　　需要設定該元素父輩元素的perspective大小。 ----- 設定在父元素中,充當3D舞臺

　　 perspective(n)定義視點離螢幕的距離。

perspective: 300px;

3D旋轉

第一種格式:

transform: rotateY(360deg);
 

第二種格式:

transform:rotate3d(0,1,0,360deg);

rotate3d(x,y,z,angle)定義3D旋轉。

　　x：是一個0到１之間的數值，主要用來描述元素圍繞X軸旋轉的向量值；

　　y：是一個０到１之間的數值，主要用來描述元素圍繞Y軸旋轉的向量值；

　　z：是一個０到１之間的數值，主要用來描述元素圍繞Z軸旋轉的向量值；

　　angle：是一個角度值，主要用來指定元素在3D空間旋轉的角度，如果其值為正值表示元素順時針旋轉，為負值表示元素逆時針旋轉。

CSS3中的3D旋轉主要包括四個功能函式
rotateX(angle)、

rotateY(angle)、

rotateZ(angle)、等價於rotate(angle)

rotate3d(x,y,z,angle)
x, y, z分別接受一個數值(number),用來計算向量方向(direction vector)，向量方向是三維空間中的一條線, 從座標系原點到x, y, z值確定的那個點，元素圍繞這條線旋轉angle指定的值

3D平移

第一種方式

transform: translateX(200px);

第二種方式

transform: translateZ(length)是3D Transformaton特有的，其他兩個2D中就有
translateZ 它不能是百分比 值; 那樣的移動是沒有意義的。
transform: translate3d(translateX,translateY,translateZ);
translateZ 它不能是百分比 值; 那樣的移動是沒有意義的。

translate3d(x,y,z)定義3D平移，x,y,z分別為移動的位移。

　　如下程式碼中，設定父元素的perspective( )為1000px，x,y,x值分別設定為100px,100px,100px。

transform: translate3d(100px,0,0);

3D縮放

transform: scaleZ(number)
transform: scale3d(scaleX,scaleY,scaleZ);

如果只設置scaleZ(number)，你會發現元素並沒有被擴大或壓縮，scaleZ(number)需要和translateZ(length)配合使用，number乘以length得到的值，是元素沿Z軸移動的距離，從而使得感覺被擴大或壓縮

scale3d一定要在translate前,不然沒有效果

transform: scaleZ(2) translateZ(100px);

scale3d(x,y,z)，scaleX(x)，scaleY(y)，scaleZ(z)定義3D縮放轉換

　 1.scale3d(x,y,z)通過使用3D縮放函式，可以讓元素在Z軸上按比例縮放。

　　預設值為1，當值大於1時，元素放大，反之小於1大於0.01時，元素縮小。

　　當scale3d()中x和y值同時為1，即scale3d(1,1,z)，其效果等同於scaleZ(z)。

 transform:scale3d(2,2,1);