Css3 transform 2D Experiment (1)

This is a big difference between browsers. How can we integrate and test it!

 
$. Require ("Ready, CSS", function () {// mass framework by situ zhengmei var $ El = $ ("# test") var matrix = cancel.css ("transform ", "rotate (90deg )"). data ("matrix", void 0, true) // print the result of using getcomputedstyle in the browser. log($el.css ("transform") // print the result after $. results processed by matrix $. log (matrix. get2d (); // break down the original value to obtain the attributes of A, B, C, E, TX, Ty, and return an attribute containing X, Y, scalex, scaley, skewx, skewy, rotation object matrix. decompose2d (); $. log (matrix. a) $. log (matrix. b) $. log (matrix. c) $. log (matrix. d) $. log (matrix. TX) $. log (matrix. ty );});
 

The following test results

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

A abandoned matrix class:

// Http://extremelysatisfactorytotalitarianism.com/blog? P = 1002 // http://someguynameddylan.com/lab/transform-origin-in-internet-explorer.php // optimized HTML5 app experience details such as full screen processing and support, horizontal screen response, graphic scaling fluency and no distortion, point-of-touch response and drag, websocket perfection // question about loss of computational precision in Javascript http://rockyee.iteye.com/blog/891538 function tofixed (d) {return D>-0.0000001 & D clockwise turn 60 degrees 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 );}, // please refer to specific links // │ a c tx │ M11-M12 TX │ // │ B D ty │-m21 m22 TX │ // please refer to specific links // http://help.adobe.com/zh_CN/FlashPlatform/reference/actionscript/3/flash/geom/Matrix.html // decomposition of original values, get the attributes A, B, C, E, TX, Ty, and return the decompose2d: function () object containing X, Y, scalex, scaley, skewx, skewy, and rotation () {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