http://www.cnblogs.com/iamzhanglei/p/3990132.html
transformjs：让天下没有难做的生意！不对，是特效！
2014-09-24 10:51 by 【当耐特】, 3465 阅读, 6 评论, 收藏, 编辑
写在前面
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/