當耐特

##寫在前面
transform是css3新增的一個屬性,可是令開發者費解的是，其內部又有大量的屬性如旋轉、縮放、扭曲、平移，這也就導致了獲取或者是設置transform中一個或者多個屬性變得異常麻煩。

transform.js意義

• 讓前端沒有難做的特效
• 告別style.xxxTransform= "xxx(xxdeg) xxx(xxx) "
• 直接element.scaleX=0.5，element.ratation=30.....,更加pure和友好;
• 自動更新元素的顯示狀態

當然這里transformjs沒有提供諸如:animate({scaleX:2,ratation:60},500)的方法，開發者可以基于transform.js自行去封裝，transformjs都這么便利了，結合tween也好，或者利用transition也好，封裝一個animate方法應該非常簡單。說白了，transformjs只負責讓開發者通過簡單的賦值操作，讓dom變化。

5分鐘精通transform.js

這里是沒有使用任何模塊化開發框架，直接暴露在window下的使用代碼：

var element = document.querySelector("#testTransform");
//只需這一行代碼
transform.mix(element);
//element就能夠72變
element.rotation++;
element.scaleX = 2;
element.scaleY = 3;

當然還可以設置諸如：x, y, scaleX, scaleY, rotation, skewX, skewY, regX, regY等屬性。

其中x對應translateX、y對應translateY、rotation對應rotateZ，regX和regY相當于設置transform-origin。其余屬性和transform一致。目前不支持3d

transform.js原理

transformjs依賴 observablejs用于響應屬性改變，自動更新元素顯示狀態。
transformjs依賴 matrix2D用于將元素的transform屬性轉換為2*3的矩陣，然后賦值給dom的style的transform屬性。見核心代碼：

observer.propertyChangedHandler = function () {
    var mtx = self.element.matrix2D.identity().appendTransform(self.element.x, self.element.y, self.element.scaleX, self.element.scaleY, self.element.rotation, self.element.skewX, self.element.skewY, self.element.regX, self.element.regY);
    self.element.style.transform = self.element.style.msTransform = self.element.style.OTransform = self.element.style.MozTransform = self.element.style.webkitTransform = "matrix(" + [mtx.a, mtx.b, mtx.c, mtx.d, mtx.tx, mtx.ty].join(",") + ")";
}

在線演示

http://kmdjs.github.io/transformjs/

Github

https://github.com/kmdjs/kmdjs

有問題反饋

在使用中有任何問題，歡迎反饋給我，可以用以下聯系方式跟我交流

• mail:(kmdjs#qq.com, 把#換成@)
• qq: 644213943
• weibo: @當耐特