在學習CSS3 3D 變換前我們有必要學習下座標系，不然各種角度讓人覺得很頭疼。數學課本中的三維座標系是右手座標系，而計算機中的左手座標系使用較多。
1、左手座標系
伸出左手，讓拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。這樣我們就建立了一個左手座標系，拇指、食指和中指分別代表X、Y、Z軸的正方向。如下圖：
2、CSS3中的3D座標系
CSS3中的3D座標系與上面的左手座標系有一定區別的，相當於其繞着X軸旋轉了180度。就變成這樣了
3、如何判斷旋轉角度：左手法則
左手握住旋轉軸，豎起拇指指向旋轉軸正方向，正向就是其餘手指捲曲的方向（順時針方向）。
總結：XYZ軸的正方向分別是：右、下、屏幕外，讓軸正向對着自己，順時針方向就是該軸旋轉的方向。
4、透視 perspective
perspective 視距，表示視點距離屏幕的長短。視點，用於模擬透視效果時人眼的位置。
電腦顯示屏是一個2D平面，圖像之所以具有立體感（3D效果），其實只是一種視覺呈現，通過透視可以實現此目的。
透視可以將一個2D平面，在轉換的過程當中，呈現3D效果。這個是美術透視的概念，感覺有點懵。。
注：並非任何情況下需要透視效果，根據開發需要進行設置。
比較通用的距離是設置爲800px
perspective有兩種寫法
a) 作爲一個屬性，設置給父元素，作用於所有3D轉換的子元素
b) 作爲transform屬性的一個值，做用於元素自身
.class{
perspective: 800px;
}
.class{
transform: prespective(800px)
}
用translateZ做一個實驗吧
translateZ（）定義 3D 轉化，僅使用用於 Z 軸的值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css" media="screen">
.box{
width: 300px;
height: 300px;
margin:50px auto;
border: 1px solid #ddd;
position: relative;
}
.test{
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: rgba(255,0,255,0.5);
left:0;
right: 0;
top:0;
bottom: 0;
margin:auto;
transition: all 500ms ease;
/*transform-style:preserve-3d;*/
/*transform: perspective(800px);*/
}
.test:hover{
transform:translateZ(1000px);
}
</style>
</head>
<body>
<div class="box">
<div class="test"></div>
</div>
</body>
</html>
實驗的本意是鼠標移到裏面盒子的時候，視覺上盒子向屏幕外（Z軸）移動1000px,有放大效果。但在未設置透視距離的時候，沒有任何效果。去掉註釋後的效果：
