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

Source: Internet
Author: User

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;
. 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:


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


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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.