How does the zoom or matrix Filter Center point transformation in CSS3 compatible with IE

Compatibility ground matrix Transform effect

Ie9+ supports CSS3 transform transformations, IE9 need-ms-private prefixes, but what about IE6-IE8?

In the article "IE Matrix filter matrix rotation and scaling and the expansion of the combination of transform", a CSS3 transform is converted to IE Matrix filter tool: IE ' s CSS3 Transforms Translator, So we can implement the transform transform effect of various compatibility on the Web.

However, ie matrix transformation, or zoom scaling will change the original occupy display size, location, and CSS3 elegant transform is completely different, resulting in, we need to do an additional offset on IE. The tool mentioned above automatically calculates the margin offset size that should be

However, most of us math is the PE teacher to pay, calculate the offset value of what, think about the big head empress, can't, like CSS3 transform like, on the right center enlarge?

Children's shoes, slightly subtotal, there are ways to drip.

IE zoom scaling or matrix transformation based on central point

Principle is as follows
Embed a huge ocean-wide container, and then let the elements inside the ocean-like container horizontal and vertical positioning.

Code hint

The code is as follows	Copy Code
. outer { /* External Visual Area container * * width:100px; height:100px; position:relative; Overflow:hidden; } . container { * * Inside the broad ocean/ width:1000px; height:1000px; Position:absolute; left:50%; top:50%; Margin: -500px 0 0-500px; }

instance-element hover magnification effect
To achieve the effect as follows:

The

Demo page has up to two signals, above one for the general positioning of the implementation, the following for the use of "vast ocean" technology, in IE9 above browsers, because it is the use of pure CSS3 transform implementation, therefore, can not see the difference.

However, in the IE8 browser, you will see the difference, for example, the traditional positioning implementation, hover image amplification, it is not the center point magnification, but the upper left corner, not the effect we want:


But, the following picture, Hover when the picture is the center point amplification, is the effect we want, bang Bang! The key to the implementation of the



Implementation
is the horizontal vertical center of the elements that need to be transformed within the ocean, and to be compatible with IE7, the way I know it is inline-block, The horizontal center lets the container text-align, the vertical center realizes is the reconstruction high 100%, the vertical-align:middle invisible element.