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) ，括號內填平移參數值，可以是負值，即反方向；

例如：

div {    /*元素向右平移50px，向下移60px*/    transform: translateX(50px);    transform: translateY(60px);}/*簡寫形式，效果相同*/div {    transform: translate(50px, 60px);}

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

rotate(deg)

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

例如：

div {    /* 順時針旋轉30° */    transform: rotate(30deg);}

scale(x,y)

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

例如：

div {    /* 橫向縮小一半，縱向放大一倍 */    transform: scale(.5, 2);}

div {    /* 按比例放大3倍 */    transform: scale(3);}

skew(xdeg,ydeg)

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

例如：

div {    transform: skewX(30deg);    transform: skewY(45deg);}/* 簡寫 */div {    transform: skew(30deg, 45deg);}

需要 注意 ，如果元素為一個矩形，那么 skewX(30deg) 表示矩形 頂邊固定 ，底邊 向右 傾斜 30deg ； skewY(30deg) 表示矩形 左邊框固定 ，右邊框 向下 傾斜 30deg ；

可以根據上面講的屏幕坐標系來記憶，x軸位于屏幕頂部，方向向右；y軸位于屏幕左部，方向向下；

如果 skew() 只指定一個值，默認是 水平傾斜 ；

skewX(30deg)的效果：

skewY(30deg)的效果：

matrix(a,b,c,d,e)

這是一個綜合屬性，之前的平移，縮放，旋轉，傾斜都能通過這個矩陣函數實現，對，大學里 線性代數 中的矩陣 T_T；

其實這個函數就是前面四種操作的 原理 ，函數共有六個參數，四種操作都對應不同的參數改變方式，像我們這種非數學專業的就不贅述原理了，前面的操作基本夠用了(想尋找刺激就去百度“css matrix”吧)~~;

3D變換

所謂3D就是在前面2D平面上多了一個 z軸 ，方法名也差不多，然后能以分別以三根軸位基準進行變換，實現立體效果；

看一下所有3D操作方法：

translate3d(x,y,z)

結合前面講的空間坐標系和 x, y, z軸的位置，三個參數分別對應元素在三個坐標軸方向的平移值，也包含三個方法 translateX(x) , translateY(y) , translateZ(z) ；

舉例：

div {    transform: translateX(50px);    transform: translateY(60px);    transform: translateZ(70px);}/* 簡寫 */div {    transform: translate3d(50px, 60px, 70px);}

注意：關于設置 translateZ(z) 看不出效果的問題，后面說到設置 persoective 時會解釋；

rotate3d(x,y,z,deg)

參數 x, y, z 為空間坐標系的一個坐標位置，然后由原點 (0, 0, 0) 指向這個點形成一個有方向的新軸，數學中稱矢量，最后一個參數就是元素圍繞剛才所形成的新軸旋轉的度數；

也包括 rotateX(deg) , rotateY(deg) , rotateZ(deg) ，之前2D的 rotate() 便是這里的 rotateZ() ；

至于旋轉的方向，判斷方法類似于物理中的 左手定則 ：角度指定為正的話，左手拇指與四指垂直，拇指指向元素圍繞旋轉的坐標軸或自定義軸，四指彎曲圍繞方向就是旋轉方向；

舉例：

div {    transform: rotateX(30deg);    transform: rotateY(30deg);    transform: rotataZ(30deg);}/* 自定義軸旋轉 */div {    transform: rotate3d(10, 10, 10, 30deg);}

rotateX(30deg)的效果：

rotateY(30deg)的效果：

關于為什么這里的旋轉不是想象中的效果，而是縮小，主要是沒有設置視點，后面會講；

scale3d(x,y,z)

元素關于三個軸的縮放比例，包括 scaleX(x) , scaleY(y) , scaleZ(z) ，舉例：

div {    transform: scaleX(2);    transform: scaleY(2);    transform: scaleZ(2);}/* 簡寫 */div {    transform: scale3d(2, 2, 2);}

需要 注意 這里的 scaleZ() ，正常情況下，擴大z軸會是物體 變厚 ，但是css里面呈現的平面元素并沒有 厚度 ，所以這里的縮放z軸其實是縮放元素在z軸的 坐標 ，所以要有效果必須要指定 translateZ() 的值；

舉例：

body {    perspective: 500;}div {    /* 必須這個順序，先縮放后平移，不然無效果 */    transform: scaleZ(2) translateZ(100px);}

按照上面樣式才能看到 scaleZ(2) 的效果，因為后面在z軸上移動了 100px ，縮放比例為2，最終會移動 200px ，屏幕上則表現為元素放大了一下，這是透視效果，就是那個 perspective 值，下面會講到；

matrix3d()

和前面2D的 matrix() 相似，只不過這里括號里的參數有 16個 ，矩陣更加復雜，跳過吧