1、平移變換（translate）
平移表達式transform="translate(x,y)"，即新坐標系的原點在原坐標系的（x,y）處。坐標軸的方向
不變。
2、旋轉變換（rotate）
transform="rotate(angle cx,cy)"。angle代表旋轉角度，缺省單位是“度”，瞬時針為正，逆時針為
負。（cx,cy）是旋轉中心所在的坐標。若省略旋轉中心坐標，則缺省值是（0,0）。
3、伸縮變換（scale）
transform="scale(sx,sy)"，sx,sy分別代表x軸方向和y方向拉伸或縮小的比例因子。拉伸：大于1；``縮小：小于1。若省略sy，即sy=sx，作等比例縮放。
4、歪斜變換（skew）
transform="skewX(x-angle)"或transform="skewY(y-angle)"，x-angle,y-angle分別代表沿x軸和y軸
歪斜的角度。
5、矩陣變換（matrix）
transform="matrix(a b c d e f)"，這里的六個參數分別是變換矩陣中的六個參數。特點是靈活性
大，無論多么復雜的變換，只需進行一次矩陣運算即可。
svg中transform的矩陣變換原理
transform的原理是計算機圖形學中的2D矩陣變換， 在開始之前，首先來復習下一個簡單的線性代數知識：矩陣與向量乘法。太復的用不到，只需要3維向量與3x3矩陣的乘積：
接下來我們來說說transform跟矩陣乘法的關系，我們的任何一個html元素渲染完成后可以得到一張位圖，把這張位圖上所有的點都做一次矩陣運算，將得到一張的新的位圖，這就是transform的基本含義。 首先來看最簡單的transform，translate。我們都知道tansform:translate(tx,ty);的基本含義是將一個元素的顯示位置平移tx,ty。在矩陣變換中，translate體現為下面的矩陣運算： tansform:scale(sx,sy);將一個元素拉伸或者壓縮指定的倍數，它對應的矩陣變換是： transform:rotate(a)將一個元素旋轉角度a，它對應的矩陣變換是：
transform:skew(ax,ay)將一個元素研x向和y向傾斜角度ax和ay，它對應的矩陣變換是： transform:matrix(a,b,c,d,e,f)則是完整的矩陣變換，把這張位圖上所有的點都做一次矩陣乘法，得到的新位圖 transition涉及到的則是另一個數學概念：貝塞爾插值。 transition的變換函數有 linear ease ease-in ease-out ease-in-out幾種，通常我們嘗試使用時能感覺到它們之間稍有不同。 實際上，它們是使用了不同的參數進行三次貝塞爾插值計算的結果。所以我們先來復習一下貝塞爾插值： 一個量（可以是任何矢量或者標量）從一個值到變化到另一個值，如果我們希望它按照一定時間平滑地過渡，就必須要對它進行插值。 最基本的情況，我們認為這個變化是按照時間均勻進行的，這個時候，我們稱其為線性插值。而實際上，線性插值不大能滿足我們的需要，因此數學上出現了很多其它的插值算法，其中貝塞爾插值法是非常典型的一種。它根據一些變換中的控制點來決定值與時間的關系。 K次貝塞爾插值算法需要k+1個控制點，最簡單的一次貝塞爾插值就是線性插值，將時間表示為0到1的區間，一次貝塞爾插值公式是： 二次貝塞爾插值有3個控制點，相當于對P0和P1，P1和P2分別做貝塞爾插值，再對結果做一次貝塞爾插值計算 三次貝塞爾插值則是兩次二次貝塞爾插值的結果在做一次貝塞爾插值： 回到我們的transition，我們要用到的就是三次貝塞爾插值算法了。 把時間認為是0,1區間，待變換屬性也認為是0,1區間，那么所有的控制函數都是三次貝塞爾函數： ease [0, 0] [0.25, 0.1] [0.25, 1.0] [1.0,1.0] linear [0, 0] [0.0, 0.0] [1.0, 1.0] [1.0,1.0] ease-in [0, 0] [0.42, 0] [1.0, 1.0] [1.0,1.0] ease-out [0, 0] [0, 0] [0.58, 1.0] [1.0,1.0] ease-in-out [0, 0] [0.42, 0] [0.58, 1.0] [1.0,1.0] cubic-bezier(x1,y1,x2,y2) [0, 0] [x1, y1] [x2, y2] [1.0,1.0] 最后附上各函數圖，請自行辨認：
源自 http://www.cnblogs.com/jenry/archive/2010/12/11/1903397.html
http://www.2cto.com/kf/201301/186980.html
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。
