Transform-變形 CSS3 2D Transform translate() 移動：將HTML元素在x-y軸平面上做位移，且不會影響到其他元素 translate(x,y)水平方向和垂直方向同時移動（也就是X軸和Y軸同時移動） translateX(x)僅水平方向移動（X軸移動） trans ...
Transform-變形
CSS3 2D Transform
translate() //移動 rotate() //旋轉 scale() //縮放 skew() //扭曲 matrix() //矩陣變形
translate() 移動：將HTML元素在x-y軸平面上做位移，且不會影響到其他元素
translate(x,y)水平方向和垂直方向同時移動（也就是X軸和Y軸同時移動）
translateX(x)僅水平方向移動（X軸移動）
translateY(y)僅垂直方向移動（Y軸移動）
例：
-webkit-transform: translate(20px,20px); /*Webkit內核瀏覽器：Safari and Chrome*/ -moz-transform: translate(20px,20px); /*Mozilla內核瀏覽器*/ -o-transform: translate(20px,20px); /*Opera*/ -ms-transform:translate(20px,20px); /*IE9*/ transform: translate(20px,20px); /*W3C標準*/
rotate() 旋轉
需先有transform-origin屬性的定義。transform-origin定義的是旋轉的基點
如果設置的值為正數表示順時針旋轉，如果設置的值為負數，則表示逆時針旋轉。
如：
transform:rotate(30deg)；
scale() 縮放
scale(x,y)使元素水平方向和垂直方向同時縮放（也就是X軸和Y軸同時縮放）
scaleX(x)元素僅水平方向縮放（X軸縮放）
scaleY(y)元素僅垂直方向縮放（Y軸縮放)
但它們具有相同的縮放中心點和基數，其中心點就是元素的中心位置
縮放基數為1，如果其值大於1元素就放大，反之其值小於1，元素縮小
如：
transform:scale(1.5,1.3)
skew() 扭曲，斜切變換
skew(x,y)使元素在水平和垂直方向同時扭曲（X軸和Y軸同時按一定的角度值進行扭曲變形）
skewX(x)僅使元素在水平方向扭曲變形（X軸扭曲變形）
skewY(y)僅使元素在垂直方向扭曲變形（Y軸扭曲變形）
如：
transform:skewX(30deg)
transform:skewY（10deg）
matrix() 矩陣變形
transform: matrix(a,b,c,d,tx,ty);
本質上scale、skew、rotate、translate的效果都是通過matrix實現的，tx、ty表示位移量，matrix方法更詳細的介紹可以參考這裡：理解CSS3 transform中的Matrix(矩陣)
改變元素基點transform-origin
transform-origin(X,Y):用來設置元素的運動的基點（參照點）。預設點是元素的中心點。其中X和Y的值可以是百分值,em,px
其中X也可以是字元參數值left,center,right；Y和X一樣除了百分值外還可以設置字元值top,center,bottom
支持transform瀏覽器
IE9以下不支持
CSS3 3D Transform
3D Transform，與2D Transform相比，它給HTML元素在x-y平面加上了z軸；
translate3d(tx,ty,tz)：他定義了一個3D的位移方法，增加了z軸的偏移量 translateZ(tz)：這個方法只在Z軸偏移，與translateX()和translateY()相似 scale3d(sx,sy,sz)：在原有的scale方法上增加了z軸的參數 scaleZ(sz)：同理，只放大z軸，與scaleX()和scaleY()類似 rotate3d(rx,ry,rz)：將元素以給定參數的某一個軸方向旋轉 rotateX(angle)，rotateY(angle)和rotateZ(angle)：只按照某一個軸旋轉，rotate3d(1,0,0,30deg)相當於rotateX(30deg)，其他類推。
激活元素的3D空間，需要perspective屬性，寫法有兩種：
transform: perspective( 600px ); perspective: 600px;
寫法 transform:perspective(600px) 適用於單個元素，會對每一個元素做3D視圖的變換
而 perspective:600px 的寫法，需寫在父元素上，然後以父元素的視角，對多個子元素進行3D變換，多個子元素共用同一個3D空間
perspective的參數值，決定了3D效果的強烈程度，可以想象為距離多遠去觀察元素。值越大，觀察距離就越遠，同樣的旋轉值，看起來效果就弱一些；值越小，距離越近，3D效果就更強烈。
perspective-orgin
同樣，對一個元素進行3D變換的時候，變換點都是元素的中心點，如果你想以其他的位置為變換點，那就可以用這個屬性來做調整；
transform-style
這個參數用來共用父元素的3D空間；
transform-style有兩個值，一個是預設的flat；一個是preserve-3d
backface-visibility
backface-visibility 屬性可用於隱藏內容的背面。預設情況下，背面可見，這意味著即使在翻轉後，變換的內容仍然可見。但當 backface-visibility 設置為 hidden 時，旋轉後內容將隱藏，確保只有正面可見；
CSS3 3D Transform 理解詳見：http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/
參考資料：
http://www.w3cplus.com/content/css3-transform
http://beiyuu.com/css3-animation/
http://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-%E7%9F%A9%E9%98%B5/
http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html
http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/
