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);            });

下面測試結果

//FF12matrix(0, 1, -1, 0, 0px, 0px)matrix(0,-1,1,0,0,0)01-1000//chrome20matrix(0.0000000000000002220446049250313, 1, -1, 0.0000000000000002220446049250313, 0, 0) matrix(0,-1,1,0,0,0) 01 -1 00 0 //opera11.62matrix(0, 1, -1, 0, 0, 0)matrix(0,-1,1,0,0,0)01-1000//safari5.1.5matrix(0.0000000000000002220446049250313, 1, -1, 0.0000000000000002220446049250313, 0, 0)matrix(0,-1,1,0,0,0)01-1000

一個放棄的矩陣類：

    //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