<a href="#main">前面又一些對你可能不是特別重要的前言，你可以點擊我跳過。</a>
很久以前接了一個項目，里面需要用到一些字體小于12px的字，然后發(fā)現(xiàn)chrome不支持，當時是一個個用transform:scale()改過來的，并且判斷每個瀏覽器是不是chrome。然后在不久前準備做一個小小的js庫來直接引用然后讓其效果和火狐這種支持小字體的瀏覽器一樣。十幾天前還不支持小字體的chrome在今天突然就支持了小字體。wcnm。
然后項目就變成了 “如何讓使用transform:scale(0.5)獲得的小字體的顯示效果和直接使用了font-size:6px;的效果一樣。”期間遇到了使用element.style.fontSize只能夠獲取寫在標簽內(nèi)的樣式的問題，以及關于transform中的矩陣的問題。
通過正常的js代碼也就是element.style.fontSize這種是無法獲取到寫在style標簽以及css文件里面的屬性的，那么我們應當如何獲得呢？
可以使用window.getComputedStyle這個方法。
example：
CSS文件中有：
.height_width_chrome{
-webkit-transform:scale(0.5);
}
js文件中這么獲取：
var test2=document.getElementsByClassName('height_width_chrome');
var transform=window.getComputedStyle(test2[0],null).getPropertyValue("transform");
以字符串的形式返回，getPropertyValue里面直接寫css里面的屬性名就行了，感興趣的可以詳細了解這個方法。
現(xiàn)在問題又來了，得到transform之后，console.log會在控制臺看到
matrix(0.5, 0, 0, 0.5, 0, 0)，也就是這個值包含了所有的transform變換在里面。那么這個是什么意思呢？
<a name=main>關于transform中的matrix</a>
對了，你可能需要先看張鑫旭張大神的文章，他解釋的比我好很多，我的這篇文章可能只是想講出我自己的想法。奉上鏈接...
首先，我們所有看到的東西都可以視為圖片，例如，我們對于一個有長寬的div進行縮放，那么我們可以將這個div視為一張圖片，當你縮小為0.5倍的時候，那么面積就變?yōu)?/4倍，并且這個縮放是有中心點的，中心點的聞之可以用transform-origin:100px 200px;來更改。
然后圖像是由一個個的像素點所構成的，那么偏移指的就是圖片中的每一個像素點按照指定的規(guī)則進行偏移，假設原本的位置為（x,y）那么偏移后的位置則為（x+30,y+30），這個可以認同吧？
然后是縮放，由于縮放是有縮放算法的，可以去了解了解。
但是縮放的話我們可以這么想象，一幅圖片寬高縮小為0.5倍，那么面積會變成1/4，這個在整體的情況下是可以很容易就想出來的，但是當你去細究的時候，你會發(fā)現(xiàn)，無論怎么說，屏幕都是一個個像素點組成的，jpg，png等圖片也是一個個的像素點組成的，然后像素點的寬高根據(jù)你的屏幕分辨率來說確定的，也就是說沒有0.5px這種說法，那么是怎么將寬度縮小為原來的一般的？是直接丟棄一些像素點？很明顯的不是，縮放是有特定的算法的，屬于圖像處理的部分。
但是關于transform:scale這個的縮放，我們可以直接從宏觀的方面考慮，都學過坐標吧？每個坐標都擁有最小的單位長度，縮放呢，就只是將單位長度進行縮放（也就是說我們允許用0.5px做為單位長度1，但是實際情況不是的。有興趣的同學可以去查查圖像處理里面的縮放。），數(shù)值并不進行改變，這也就會使得你在用js獲取這個的寬高的時候會發(fā)現(xiàn)，他們的寬高的數(shù)值并沒有改變，但是在視覺上改變了。
關于旋轉，我們可以用極坐標的方式進行計算?？梢钥磮D：
好了，前面的一些解釋可以和下面的進行印證。
話說我們獲得了matrix(0.5, 0, 0, 0.5, 0, 0)，這個代表了縮小為0.5倍。首先用字母替代（看了張大佬的文章，感覺這篇文章里面充斥了他的做法。）matrix(a,b,c,d,e,f)。
那么a,d代表縮放，分別為x&y軸上的縮放，transform:scale(x,y)，scale是支持x，y方向不同縮放大小的。
e,f代表從原點的偏移，transform: translate(30px, 35px);像這樣，表示每一個像素x方向加30px，y方向加35px;
a,b,c,d則可代表著旋轉。分別為cosθ,sinθ,-sinθ,cosθ。transform:ratate(7deg)就是順時針旋轉7度。
抱歉，這篇文章由于隔了太長的時間了，可能需要點時間自己去填坑。
