Mass framework CSS module v3

The biggest highlight of this module is that it perfectly solves a world problem and simulates css3 transform 2D in ie678.

Css3 transform 2D is ultimately a problem of matrix transformation. We all know that it can be solved using IE's matrix filter. But there are too many pitfalls in it. Once rotation or distortion occurs and then displacement occurs, all previous JS libraries are computed incorrectly. I will reveal the answer step by step.

To Implement CSS transform 2D, a new css3 attribute -- transform must be used. However, at the time of writing this article, no browser supports the standard attribute mentioned by W3C, Which is prefixed. Therefore, the mass framework uses a method called cssname to obtain all available private implementation names. Transform may be replaced by webkittransform, transform, otransform, and mstramsform in the framework. You will note that ie9 should start with a lower-case character, which is a pitfall.

There are two forms for value assignment. Originally, we used methods such as translate, scale, rotate, and skew to change the image. Later, we added a matrix method similar to the IE filter.

 
-WebKit-transform: Rotate (60deg) skew (0deg,-30deg) Scale (1, 1.15);-WebKit-transform: matrix)
 

In addition, there are also translatex, translatey, skewx, skewy, scalex, and scaley. They are case-insensitive in CSS, so the JS framework should use tolowercase to avoid thunder. In addition, skew is not standard, which is the second pitfall.

For Methods Starting with Skew and rotate, their parameters must contain units, which is the third pitfall.

The scale method allows only one parameter. The second parameter is equal to the first parameter by default, which is the fourth pitfall.

Assign values in the form of matrix. The fifth and sixth parameters of FF must contain units, which is the fifth pitfall.

A method like "rotate (60deg) skew (0deg,-30deg) Scale (1, 1.15)" actually performs cubic matrix multiplication, you can also define more than two identical functions. This is the seventh pitfall.

 
-WebKit-transform: translate (10px 20px) rotate (60deg) skew (0deg,-30deg) Scale (1, 1.15) translatex (110px) // shifted twice.
 

The value is automatically converted to the matrix format, but the precision of Each browser is different, which is not conducive to testing. For example, FF has six decimal places, opera has two digits, ie9 has five digits, WebKit has 16 digits, and ie678's matrix filter is also 16 digits. We can ignore a small number of digits. In the browser, if a number has more than eight digits after the decimal point, it will be indicated by an index. We can use/e/for detection and then use tofixed for fine-tuning! This is the eighth pitfall.

A matrix must be an initial matrix. If the css3 transform attribute is not set, the standard browser returns the "NONE" string instead of the expected matrix form. The same is true for ie678. null is returned. Since the computation of standard browsers is done by the browser, the difficulty lies in IE.

 var ident = "DXImageTransform. microsoft. matrix "adapter [" transform: Get "] = function (node, name) {var M = $. _ data (node, "matrix") if (! M) {If (! Node. currentstyle. haslayout) {node. style. Zoom = 1 ;}// do not set this parameter in ie9.

   // http://www.cnblogs.com/Libra/archive/2009/03/24/1420731.html if (! Node. Filters [ident]) {var old = node. currentstyle. filter; // prevent overwriting existing filters node. style. Filter = (old? Old + ",": "") + "progid:" + ident + "(sizingmethod = 'Auto expand')";} var F = node. filters [ident]; M = new $. matrix2d (F. m11, F. m12, F. m21, F. m22, F. DX, F. dy); $. _ data (node, "matrix", m) // save it to the cache system, saving computing every time} return name = true? M: M. tostring () ;}

the preceding Code has several notes. The filter must be haslayout, so zoom hack is used. Since filters share one attribute, we do not know that these elements were previously bound with multiple filters, such as transparent filters, PNG patch filters, and box shadow filters, which are very common, therefore, we should avoid overwriting existing filters. This is the ninth pitfall. Brendankenny boasted in "on the behavior of 2D transformations in Internet Explorer, Part 2" that it found a way to quickly deform around the element center, which is actually a big mistake! Overwrite the existing filter!

 // set linear transformation via Matrix filtervar filt = 'progid: DXImageTransform. microsoft. matrix ('; filt + = 'm11 =' + A; filt + = ', m21 =' + B; filt + = ', M12 =' + C; filt + = ', m22 =' + D; filt + = ', sizingmethod = "auto expand")'; target. style ['filter'] = filt ;//★★★Problematic code // assuming a-d are local variables // and halfw and halfh are initialized properly // horizontal shifta = math. ABS (a); // or go ternaryc = math. ABS (c); var SX = (a-1) * halfw + C * halfh; // vertical shiftb = math. ABS (B); D = math. ABS (d); var Sy = B * halfw + (d-1) * halfh; // translation, corrected for origin shift // rounding helps -- but doesn't eliminate -- integer jitteringtarget. style. left = math. round (x + E-SX) + 'px '; target. style. top = math. round (Y + F-sy) + 'px'; 

By default, elements are deformed around the center, which is the largest pitfall and the tenth pitfall. The IE filter is deformed in the upper left corner of the perimeter. In order to simulate this effect, the foreigner tried to study it. Among them, the most outstanding solution, from heygrady in correcting transform origin and translate in IE,
Csssandpaper of useragentman and jquery. transform2 of louisremi all follow their ideas. The disadvantage in the US is that heygrady cannot take the rectangle size before deformation:

 
VaR filter = $ ELEM [0]. style. filter; $ ELEM [0]. style. filter = ''; // measure the element var width = $ ELEM. outerwidth (); var Height = $ ELEM. outerheight (); // re-do the filter $ ELEM [0]. style. filter = filter; // This actually cannot be changed back
 

Their Calculation of the coordinates of the new matrix is also extremely complex. In ie, the coordinates of the new matrix can only be simulated by relative positioning or margin, but the coordinates in the lower left corner must be recalculated no matter what we do. Haygrady uses a file jquery. matrix. Calculations. js to place these functions, showing the complexity. We can calculate that there are more or less deviations. So here I have to turn. The following shows how to obtain the size of the rectangle before deformation:

VaR filter = node. filters [ident]; filter. m11 = filter. m22 = 1; // obtain the width and height before deformation. The original matrix is [,] filter. m12 = filter. m21 = 0; var width = node. offsetwidth; var Height = node. offsetheight; filter. m11 = m. a; // perform matrix transformation filter. m12 = m. c filter. m21 = m. b; filter. m22 = m. d; filter. DX = m. TX; filter. DY = m. ty; $. _ data (node, "matrix", m); var Tw = node. offsetwidth, Th = node. offsetheight; // get the height and width of the node after deformation. style. position = "relative"; node. style. left = (width-tw)/2 + M. tx + "PX"; node. style. top = (height-th)/2 + M. ty + "PX ";
 

Some people may ask, why don't they cache their width and height at the beginning? Because the filter room may be directly written to an external style table, and such a table is loaded before our database, the width and height before deformation are also obtained.

The rest is the calculation of the width and height, which can be calculated by matrix multiplication, and the result is also above.

Let's end with an example:

$. Require ("Ready, CSS", function () {$ (". sample1 ").css (" transform "," Scale (1.3) rotate (270deg) skew (-40deg, 0deg) Translate (200px,-140px )")});
 

Source Code address: CSS. JS,
Css_fix.js

This is a test