變形原點
transform翻譯成漢語具有"變換"或者"改變"的意思。
通過此屬性具有非常強大的功能，比如可以實現元素的位移、拉伸或者旋轉等效果
最能體現transform 屬性強大實力的是實現元素的3d變換效果。
2d變換，是在乙個平面對元素進行的操作。
可以對元素進行水平或者垂直位移、旋轉或者拉伸.
對上面座標系簡單分析如下：
（1）.預設狀態下，x軸是水平的，向右為正。
（2）.預設狀態下，y軸是垂直的，向下為正，這與傳統的數學座標系不同。
旋轉rotate()函式通過指定的角度引數對元素根據物件原點指定乙個2d旋轉。它主要在二維空間內進行操作，接受乙個角度值，用來指定旋轉的幅度。如果這個值為正值，元素相對原點中心順時針旋轉；如果這個值為負值，元素相對原點中心逆時針旋轉。
rotatex() 方法，元素圍繞其 x 軸以給定的度數進行旋轉
rotatey() 方法，元素圍繞其 y 軸以給定的度數進行旋轉
傾斜skew()函式能夠讓元素傾斜顯示。它可以將乙個物件以其中心位置圍繞著x軸和y軸按照一定的角度傾斜。
乙個引數時：表示水平方向的傾斜角度；
兩個引數時：第乙個引數表示水平方向的傾斜角度，第二個引數表示垂直方向的傾斜角度
transform-origin是變形原點，也就是該元素圍繞著那個點變形或旋轉，該屬性只有在設定了transform屬性的時候起作用；
因為我們元素預設基點就是其中心位置，換句話說我們沒有使用transform-origin改變元素基點位置的情況下，transform進行的rotate,translate,scale,skew等操作都是以元素自己中心位置進行變化的。
transform-origin：x y;
屬性值：
left top
10px 20px
10% 20%
center
css3開發 2D變形功能總結
一 基本操作 1.旋 transform rotate 順時針旋轉的度數 2.縮放 transform scale 水平方向縮放的比例，垂直方向縮放的比例 3.傾斜 transform skew 水平方向上傾斜的角度，垂直方向上傾斜的角度 4.移動 transform translate 水平方向上...
2D功能函式
一 2d功能函式 1 2d位移 transform translate x,y transform translatex x軸移動的距離 transform translatey y軸移動的距離 2 2d的縮放 transform scale x,y transform scalex transfo...
CSS3過渡和2D屬性
一 過渡屬性 1.transition property 檢索或設定物件中的參與過渡的屬性說明 屬性值可以單獨設定否個屬性，也可以設定多個屬性 width，height 還可以設定為all 預設值 代表所有屬性 2.transition duration 檢索或設定物件過渡的持續時間說明 單位 s,...