一.三維坐標
空間中三維坐標如下圖所示：
向上為-Y，向下為+Y，向左為-X，向右為+X，向前為+Z，向后為-Z。
二.perspective(n)為 3D 轉換元素定義透視視圖
perspective的中文意思是：透視，視角。
沒有透視定義，不成3D。
下圖為透視的一張圖：
CSS3中3D transform的透視點是在瀏覽器的前方！
需要設置該元素或該元素父輩元素的perspective大小。
perspective(n)定義視點離屏幕的距離。
三.translate3d(x,y,z)，translateX(x)，translateY(y)，translateZ(z)定義3D平移轉換
1.translate3d(x,y,z)定義3D平移，x,y,z分別為移動的位移。
如下代碼中，設置父元素的perspective( )為1000px，x,y,x值分別設置為100px,100px,100px。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3</title> <style type="text/css"> .father{ -webkit-perspective: 1000px; -moz-perspective: 1000px; perspective: 1000px; } div { width:120px; height:75px; background-color:red; border:1px solid black; } div#div2 { -webkit-transform:translate3d(100px,100px,100px); /* Safari and Chrome */ -moz-transform:translate3d(100px,100px,100px); /* Firefox */ transform:translate3d(100px,100px,100px); } </style> </head> <body> <div class="father"> <div>ORIGINAL</div> <div id="div2">TRANSFORMED</div> </div> </body> </html>
效果如下圖所示：
2.translateX(x)，定義平移轉換，只用X軸的值。
如下代碼中，設置translateX( )值為100px。
div#div2 { -webkit-transform:translateX(100px); /* Safari and Chrome */ -moz-transform:translateX(100px); /* Firefox */ transform:translateX(100px); }
效果如下圖所示：
3.translateY(y)，定義平移轉換，只用Y軸的值。
如下代碼中，設置translateY( )值為100px。
div#div2 { -webkit-transform:translateY(100px); /* Safari and Chrome */ -moz-transform:translateY(100px); /* Firefox */ transform:translateY(100px); }
效果如下圖所示：
4.translateZ(z)定義平移轉換，只用Z軸的值。
定義translateZ( )，必須要先定義perspective值，否則沒有效果。
translateZ( )的功能就是讓元素在自己的眼前或近或遠。
設置的translateZ( )值越小，則子元素越小（因為元素遠去，我們眼睛看到的就會變小）,translateZ( )值越大，該元素也會越來越大。
translateZ( )值接近於perspective值時，該元素的大小就會撐滿整個屏幕。
如下代碼中，設置父元素的perspective( )為1000px，translateZ( )值為120px。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3</title> <style type="text/css"> .father{ -webkit-perspective: 1000px; -moz-perspective: 1000px; perspective: 1000px; } div { width:120px; height:75px; background-color:red; border:1px solid black; } div#div2 { -webkit-transform:translateZ(120px); /* Safari and Chrome */ -moz-transform:translateZ(120px); /* Firefox */ transform:translateZ(120px); } </style> </head> <body> <div class="father"> <div>ORIGINAL</div> <div id="div2">TRANSFORMED</div> </div> </body> </html>
效果如下圖所示：
四.rotate3d(x,y,z,angle)，rotateX(angle)，rotateY(angle)，rotateZ(angle)定義3D旋轉
1.rotate3d(x,y,z,angle)定義3D旋轉。
x：是一個0到１之間的數值，主要用來描述元素圍繞X軸旋轉的矢量值；
y：是一個０到１之間的數值，主要用來描述元素圍繞Y軸旋轉的矢量值；
z：是一個０到１之間的數值，主要用來描述元素圍繞Z軸旋轉的矢量值；
angle：是一個角度值，主要用來指定元素在3D空間旋轉的角度，如果其值為正值表示元素順時針旋轉，為負值表示元素逆時針旋轉。
如下代碼中，設置x,y,z均為1，angle為30deg。
div#div2 { -webkit-transform:rotate3d(1,1,1,30deg); /* Safari and Chrome */ -moz-transform:rotate3d(1,1,1,30deg); /* Firefox */ transform:rotate3d(1,1,1,30deg); }
效果如下圖所示：
2. rotateX(angle)，定義沿着X軸的3D旋轉
rotateX(angle)表示以X軸為旋轉軸旋轉。
rotateX(angle)函數功能等同於rotate3d(1,0,0,angle)。
如下代碼中，設置angle為40deg。
div#div2 { -webkit-transform:rotateX(40deg); /* Safari and Chrome */ -moz-transform:rotateX(40deg); /* Firefox */ transform:rotateX(40deg); }
效果如下圖所示：
3. rotateY(angle)，定義沿着Y軸的3D 旋轉
rotateY(angle)表示以Y軸為旋轉軸旋轉。
rotateY(angle)函數功能等同於rotate3d(0,1,0,angle)。
如下代碼中，設置angle為40deg。
div#div2 { -webkit-transform:rotateY(40deg); /* Safari and Chrome */ -moz-transform:rotateY(40deg); /* Firefox */ transform:rotateY(40deg); }
效果如下圖所示：
4. rotateZ(angle)，定義沿着Z軸的3D旋轉
rotateZ(angle)表示以Z軸為旋轉軸旋轉。
rotateZ(angle)函數功能等同於rotate3d(0,0,1,angle)。
如下代碼中，設置angle為40deg。
div#div2 { -webkit-transform:rotateZ(40deg); /* Safari and Chrome */ -moz-transform:rotateZ(40deg); /* Firefox */ transform:rotateZ(40deg); }
效果如下圖所示：
五.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)。
如下代碼中，設置x值為2，y值為2，z值為1。
div#div2 { -webkit-transform:scale3d(2,2,1); /* Safari and Chrome */ -moz-transform:scale3d(2,2,1); /* Firefox */ transform:scale3d(2,2,1); }
效果如下圖所示：
2.scaleX(x)通過設置X軸的值來定義縮放轉換。
scaleX(x)使元素的寬變成原來的x倍。
如下代碼中，設置scaleX( )值為2。
div#div2 { -webkit-transform:scaleX(2); /* Safari and Chrome */ -moz-transform:scaleX(2); /* Firefox */ transform:scaleX(2); }
效果如下圖所示：
3.scaleY(y)通過設置Y軸的值來定義縮放轉換。
scaleY(y)使元素的高變成原來的y倍。
如下代碼中，設置scaleY( )值為2。
div#div2 { -webkit-transform:scaleY(2); /* Safari and Chrome */ -moz-transform:scaleY(2); /* Firefox */ transform:scaleY(2); }
效果如下圖所示：
4.scaleZ(z)通過設置Z軸的值來定義縮放轉換。
scaleZ( )和scale3d( )函數單獨使用時沒有任何效果，需要配合其他的變形函數一起使用才會有效果。