css3中的坐標系，rotateX就是繞着x軸旋轉，rotateY就是繞着Y軸旋轉，rotateZ就是繞着z軸旋轉（也就是xy平面的旋轉）。
perspective屬性用來設置視點，在css3的模型中，視點是在Z軸所在方向上的。
translateX,translateY表現出在屏幕中的上下左右移動，transformZ的直觀表現形式就是大小變化，實質是XY平面相對於視點的遠近變化（說遠近就一定會說到離什么參照物遠或近，在這里參照物就是perspective屬性）。比如設置了perspective為200px;那么transformZ的值越接近200，就是離的越近，看上去也就越大，超過200就看不到了，因為相當於跑到后腦勺去了，你不可能看到自己的后腦勺。（200-transformZ的值）就是視點和xy平面的距離（初始是屏幕的位置，此時transformZ的值為0）。
需要注意的一點是，整個坐標系中各各坐標軸的相對關系是固定的。正常情況下，視點和我們的眼睛是同一個方向的如同上面所講。而當執行如rotateX(90deg)等旋轉變換時，zy平面旋轉，z軸和y軸的指向也會變化90度。此時z軸指向上方，視點也是在上方，此時我們從屏幕上看的就不是直觀的元素大小變化，而是元素的升降變化，好像站在遠處在看一部電梯或者你把書本平放舉過頭頂或下放那樣。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> div{margin:30px;width:auto;display:inline-block;} div img{width:280px;} </style> </head> <body> <div><img src="images/a9.png"></div><!--正常放置，無變化--> <div style="perspective:300px"><img src="images/a9.png" style="transform:translateZ(40px)"></div><!--z軸朝着屏幕，圖片推向你所在的方向--> <div style="perspective:300px"><img src="images/a9.png" style="transform:rotateX(90deg)"></div><!--Z軸朝天，視點在Z軸方向上--> <div style="perspective:300px"><img src="images/a9.png" style="transform:rotateX(90deg) translateZ(60px)"></div><!--Z軸朝天，視點在Z軸方向上，朝視點推進，圖片上升--> <div style="perspective:300px"><img src="images/a9.png" style="transform:rotateX(90deg) translateZ(-60px)"></div><!--Z軸朝天，視點在Z軸方向上，朝視點遠離，圖片下降--> </body> </html>
perspective屬性用在容器上時，容器內每個元素的表現形式會不一樣。當perspective屬性用再容器內每個元素身上時，會根據各自的設置值進行表現。打個比方就是你一個人平視盒子里的10個雞蛋和十個你每人看1個一模一樣雞蛋。