css3實現了對元素執行2D平面變換，以及視覺上的3D空間變換，2D變換平時可能用的較多，3D效果也能錦上添花；

關于坐標軸

初中數學的幾何學里我們便開始接觸坐標軸，最基本的是平面直角坐標系 XoY ，然后延伸出空間直角坐標系 XYZ ，現在我們來說一下css中的坐標系；

css甚至一下設備相關的開發中，基本都遵循這樣一套坐標系：以手機屏幕為例，坐標系 圓點 位于屏幕最左上角； x軸 水平，向右為正方向； y軸 垂直，向下為正方向； z軸 垂直于整個屏幕平面，向外為正方向，就是屏幕光線射向你眼睛的方向；

如圖：

2D變換

包括平移 translate() ，旋轉 rotate() ，縮放 scale() ，傾斜 skew() ，矩陣 matrix() ；

translate(x,y)

平移操作，包括 translateX(x) , translateY(y) ，括號內填平移參數值，可以是負值，即反方向；

例如：

注意 translate() 只指定一個值則默認是 x軸 位移，即水平移動；

rotate(deg)

元素旋轉，括號中參數為旋轉角度， 順時針 為正值， 逆時針 為負值，單位為 deg ，即多少度；

例如：

scale(x,y)

縮放元素，參數分別為x軸，y軸縮放倍數，包括 scaleX(x) 和 scaleY(y) ，提供一個參數表示 按比例 縮放；

例如：

skew(xdeg,ydeg)

包含 skewX(deg) , skewY(deg) ，表示在水平和垂直方向傾斜的角度；

例如：

需要 注意 ，如果元素為一個矩形，那么 skewX(30deg)