[CSS zoom and Transform properties] difference between the value of the scale attribute in the zoom and transform properties explanation and example demonstration

Browsers such as IE and chrome and zoom

Still a few years ago, zoom it was just IE's own private toy, but now, in addition to the Firefox browser, the other, especially chrome and mobile browsers have been well supported by the Zoom attribute:

zoomThe literal meaning is "zoom", a concept commonly used in photography. You can also follow this concept for the zoom effect on the web. You can change the dimensions of the elements on the page, which are true dimensions.

In the old web era. *zoom: 1you can add haslayout to the Ie6/ie7 browser to clear the floating, fix some of the problems on the layout of the incurable diseases and so on.

The supported value types are:

• Percent value: zoom:50% , which means shrinking to half the original.

• Value: zoom:0.5 , the expression shrinks to the original half.

• Normal keyword: zoom:normal equivalent to zoom:1 .

Note that although the Chrome/safari browser supports zoom properties, it zoom is not a standard property.

Second, the scale under the CSS3 transform

And the transform next is scale not the same, it is clear that the specification is clearly written. Supported from ie9+ to other modern browsers. The syntax is: transform: scale(<x> [<y>]) . At the same time scaleX , scaleY specialized x , y directional control.

and zoom different, the scale percent value and the normal keyword are not supported and can only be numeric. Plus, it can be negative, yes, negative. and zoom not negative!

Iii. deeper differences in zoom and scale

First summarize the differences seen on the above surface:

1. Browser compatibility. IE All-family/chrome/safari and ie9+ modern browser differences.

2. The values that control scaling are not the same. zoommore comprehensive, but not negative, can only be proportional control, and scale although it can only be numeric, but negative, you can only control 1 of the dimensions.

However, a deeper difference is more important.

You can really click here: Zoom vs. scale Demo

From the demo we see the following differences:

1. Zoom is scaled relative to the upper-left corner, while scale is centered by default;

2. Zoom changes the amount of space the element occupies, and the scale occupies the original size and the page layout does not change;

3. There may be differences in how the zoom and scale render calculations for elements (see below).

4. The scaling rules for text are inconsistent. Zoom zoom is still limited to a minimum of 12 pixels in Chinese, while scale is purely proportional to the graph and the text 50% is the original size.

Then there is an invisible but more important difference, and the performance of the rendering is significantly different.

Because zoom changes the true space size of an element, in other words, it affects other small partners in real time.

According to some of my colleagues ' tests, adding to any element in the flow of a document zoom causes a whole page to be re-rendered, but scale only to be redrawn on the current element. That's a good understanding, right. When scale changes, its original size is constant, therefore, there is no recalculation of layout; but zoom it's a lot of trouble to get a whole body.

This allows us to consider the implementation of some features of the mobile side.

We want to achieve the scaling effect of the element, we can use CSS3 animation , but there is a situation where the element is originally used by some transform attributes, and then use scale to animation Zoom, will overwrite the original value, things will become troublesome.

The smart little buddy thought of a way to use zoom animation. From the effect, zoom is possible, but, from the performance, we have to weigh, do not fix, found that some of the animation under the Android machine like constipation, the poop is half hanging is not falling down, you have engaged.

That's all I can say, the rest is on your own!

Iv. concluding remarks

This year's QQ public number project has the use zoom/scale , realizes the picture hover enlarges the effect. IE7/IE8 uses zoom, and other browsers use CSS3 transform scale values. As for zoom zoom is not this compatibility difference by the center point scaling, by using the "Ocean layout" implementation, the specific reference "IE under the zoom or Matrix Filter Center point Transformation Implementation" article, where there are compatible use zoom/scale examples.

In the mobile side, you can also use zoom to carry out some static content control, can avoid in order to scale occupy translate , rotate , and skew other common transform properties.

It is important to note that Chrome and other browsers zoom/scale do not use it at the same time, because the scaling effect is cumulative. As shown in 4 times times smaller:

[CSS zoom and Transform properties] difference between the value of the scale attribute in the zoom and transform properties explanation and example demonstration