CSS3 transform 2D实验（1）

这东西在各浏览器的差异性真大，叫人怎么整合与测试啊！

            $.require("ready,css",function(){// mass Framework by 司徒正美
                var $el = $("#test")
                var matrix = $el.css("transform","rotate(90deg)").data("matrix",void 0, true)
                //打印浏览器使用getComputedStyle得到结果
                $.log($el.css("transform"))
                //打印经过$.Matrix处理过的结果
                $.log( matrix.get2D() );
                //分解原始数值,得到a,b,c,e,tx,ty属性,以及返回一个包含x,y,scaleX,scaleY,skewX,skewY,rotation的对象
                matrix.decompose2D();
                $.log(matrix.a)
                $.log(matrix.b)
                $.log(matrix.c)
                $.log(matrix.d)
                $.log(matrix.tx)
                $.log(matrix.ty);
            });

下面测试结果

//FF12
matrix(0, 1, -1, 0, 0px, 0px)
matrix(0,-1,1,0,0,0)
0
1
-1
0
0
0

//chrome20
matrix(0.0000000000000002220446049250313, 1, -1, 0.0000000000000002220446049250313, 0, 0) 
matrix(0,-1,1,0,0,0) 
0
1 
-1 
0
0 
0 

//opera11.62
matrix(0, 1, -1, 0, 0, 0)
matrix(0,-1,1,0,0,0)
0
1
-1
0
0
0

//safari5.1.5
matrix(0.0000000000000002220446049250313, 1, -1, 0.0000000000000002220446049250313, 0, 0)
matrix(0,-1,1,0,0,0)
0
1
-1
0
0
0

一个放弃的矩阵类：

    //http://extremelysatisfactorytotalitarianism.com/blog/?p=1002
    //http://someguynameddylan.com/lab/transform-origin-in-internet-explorer.php
    //优化HTML5应用的体验细节，例如全屏的处理与支持，横屏的响应，图形缩放的流畅性和不失真，点触的响应与拖曳，Websocket的完善
    //关于JavaScript中计算精度丢失的问题 http://rockyee.iteye.com/blog/891538
    function toFixed(d){
        return  d > -0.0000001 && d 顺时针转60度
            fix = fix === -1 ? fix : 1;
            angle = rad(angle);
            var cos = Math.cos(angle);
            var sin = Math.sin(angle);// a, b, c, d
            var m = (new Matrix()).set2D( cos,fix * sin , fix * -sin, cos, 0, 0);
            return this.cross(m)
        },
        skew: function(ax, ay){
            var xRad = rad(ax);
            var yRad;

            if (ay != null) {
                yRad = rad(ay)
            } else {
                yRad = xRad
            }
            var m = (new Matrix()).set2D( 1, Math.tan( xRad ), Math.tan( yRad ), 1, 0, 0);
            return this.cross(m)
        },
        skewX: function(ax){
            return this.skew(ax, 0);
        },
        skewY: function(ay){
            this.skew(0, ay);
        },

        // ┌       ┐┌              ┐
        // │ a c tx││  M11  -M12 tx│
        // │ b d ty││  -M21  M22 tx│
        // └       ┘└              ┘
        //http://help.adobe.com/zh_CN/FlashPlatform/reference/actionscript/3/flash/geom/Matrix.html
        //分解原始数值,得到a,b,c,e,tx,ty属性,以及返回一个包含x,y,scaleX,scaleY,skewX,skewY,rotation的对象
        decompose2D: function(){
            var ret = {}
            this.a = this["0,0"]
            this.b = this["1,0"]
            this.c = this["0,1"]
            this.d = this["1,1"]
            ret.x = this.tx = this["2,0"]
            ret.y = this.ty = this["2,1"]

            ret.scaleX = Math.sqrt(this.a * this.a + this.b * this.b);
            ret.scaleY = Math.sqrt(this.c * this.c + this.d * this.d);

            var skewX = Math.atan2(-this.c, this.d);
            var skewY = Math.atan2(this.b, this.a);

            if (skewX == skewY) {
                ret.rotation = skewY/Matrix.DEG_TO_RAD;
                if (this.a = 0) {
                    ret.rotation += (ret.rotation