事先說明，本文範疇尚限制在2d的transform中。
對於css3的transform屬性，真是愛不釋手，有了這個特性，各種特效輕鬆搞定。引用一句歌詞「旋轉，跳躍，我不停歇」。transform就是這麼時尚，就是這麼任性。當然他任性的地方不只是在功能方面，還有在使用方面。我們看一下w3c官網中關於transform 2d的使用介紹。
看著有點多，首先先來分類一下：乙個matrix，三個translate，三個scale，三個skew，乙個rotate。而三個translate中又分為針對於xy，x，y三樣。對於這幾個操作之間的關係，我畫了一張圖來粗暴的展現。
看到這也許有人疑惑為什麼matrix會在其他所有操作的最頂端，其實除了matrix的其他操作都是屬於對matrix的乙個拓展，什麼意思呢？translate、scale、skew和rotate這幾個操作都是拿出來給不懂matrix原理的人用的，怕你不懂原理，所以封裝了幾個方法出來，讓你便捷的使用matrix方法。何以證明？有興趣的童鞋可以去檢視該元素的樣式（注：不是class規則，是計算後的樣式），或者輸出該元素的transform屬性。看看是不是得到都是統一的matrix的結果，類似於：
matrix(1, 0.466307658154999, 0, 1, 0, 0）首先說translate，翻譯過來就是「轉移」。首先解釋一下translate的語法：
transform：translate（25px,26px）transform: matrix(1, 0, 0, 1, 25, 26);然後再就是scale，我習慣翻譯成「縮放」，這樣翻譯也是對應於他的功能：縮放元件。演示一下語法：
transform:scale(1.1,1.2);transform: matrix(1.1, 0, 0, 1.2, 0, 0);我們再來看看skew，我給翻譯成「傾斜」，skew的功能就是讓元件傾斜一定的角度，可以用來畫平行四邊形，向之前有見過「帶慣性運動」的就是通過這個實現的，演示skew用單個來演示比較靠譜
transform: skewx(45deg);
transform: skewy(45deg);
transform: matrix(1, 0, 1, 1, 0, 0);
transform: matrix(1, 1, 0, 1, 0, 0);
到此，我們就了解了matrix的六個值分別代表的意義：
第乙個元素：x軸放大倍數
第二個元素：y向傾斜角度的tan值
第三個元素：x向傾斜角度的tan值
第四個元素：y軸放大的備註
第五個元素：向右偏移的畫素大小
第六個元素：向下偏移的畫素大小。
說到這裡還不算完，還有乙個ratate沒有解釋，在解釋之前先看乙個插圖：
這兩幅圖看起來效果差不多是嗎？確實差不多，不過不同的地方在於上面的圖是通過rotate實現的，而下面的圖是通過skew實現的，就是旋轉45度角了，分別拿兩個生成後的樣式來看：
transform: matrix(0.707106781186548, 0.707106781186548, -0.707106781186548, 0.707106781186548, 0, 0);
transform: matrix(1, 0.466307658154999, 0.466307658154999, 1, 0, 0);
好吧，說成這樣已經不簡單了，有點偏離我的標題，還是簡單粗暴來解釋了，上面matrix替換為:（a,b,c,d,e,f）六個值，然後根據中心點計算每個畫素的相對座標，然後計算新的座標，新座標的計算公式為：
x' = a * x + c * y + e; y' = b * x + d * y + f;在rotate的時候傳入的分別是cosθ，sinθ，sinθ和cosθ，而skew傳入的值則是：cosθ/consθ ， sinθ/cosθ ， sinθ/cosθ ， cosθ/cosθ
。所以這也是為什麼在使用skew進行旋轉的時候影象會放大了根號2倍。
其實正常情況下，使用前面說的六種計算方式來使用matrix公式就夠用了本文最後面這部分僅是為了文章的完整性而寫，卻反倒失去了簡單粗暴的原則。
CSS3中SVG簡單應用
這是火焰遮罩效果圖，順著案例簡單講一下svg的簡單應用 html部分 火焰背景遮罩字title rel stylesheet href css fire.css head css部分 fire.css text 其他的樣式 html,body body svg使用的 fire.gif 首先講一下我自...
Css3中的背景
css3對背景作了很多改變，最明顯的是可以選擇多重背景，同時它也增加了四個新的屬性。多重背景 css3中，對乙個元素可以使用一張以上的背景。除了使用逗號將分開以外，其 與css2相同。第乙個宣告的定位在元素的頂部，接下來的層列於下，像這樣 該屬確定背景畫區，有以下幾種可能的屬性 background...
CSS3中的動畫
animation實現動畫主要由兩個部分組成 通過類似flash動畫的關鍵幀來宣告乙個動畫 在animation屬性中呼叫關鍵幀宣告的動畫實現乙個更為複雜的動畫效果 設定關鍵幀 keyframes spread 33 66 100 注意 寫相容的時候瀏覽器字首是放在 keyframes中間 例如 w...