The usage and difference of zoom attribute and scale attribute in CSS

Zoom Property

Grammar:

Zoom:normal | |

Default value: Normal

Apply to: all elements

Inheritance: Have

Take value:

Normal

Use the actual dimensions of the object.

　　 ：

Use floating-point numbers to define the scaling scale. Negative values are not allowed

:

Use percentages to define the scaling scale. Negative values are not allowed

Description

Sets or retrieves the scaling ratio of the object.

The corresponding script attribute is zoom.

Scale Property

The value of the scale property is 2, which in itself is equivalent to a function because it is written as a function:

Scale ();

scale (x);

Scale (x,y);

1, scale (x,y) to scale the elements

X indicates a multiple of horizontal scaling y represents a scaling factor in the vertical direction

Y is an optional parameter and is not set, which means that the scaling multiples in the two directions of the x,y are the same. and take x as the subject.

Transform:scale (2,2.5);

2 . The ScaleX () element scales the element only in the x-axis (horizontal direction).

The default value is 1, the same as the base point at the center of the element. You can change the base point by Transform-origin.

Transform:scalex (2);

3 . The ScaleY () element scales the element only in the y-axis (vertical direction).

The central position of the element as the base point. You can change the base point by Transform-origin.

Transform:scaley (2);

Look at the compatibility notation:

CSS code copy content to clipboard

. test{

-moz-transform:scale (2,2);

-webkit-transform:scale (2,2);

-o-transform:scale (2,2);

Background:url (img/i.png) no-repeat;

width:198px;

height:133px;

}

The difference between zoom and scale

Zoom and scale These two things are used for scaling elements, but there are a few different places besides compatibility. Zoom scaling keeps the element in the upper-left corner, and scale by default is the middle position, which can be set by Transform-origin. In addition, they perform different rendering sequences zoom may affect the calculation of the box.

Run

　CSS Code copy content to clipboard

2. <style>
4. div {
6. width:300px; height:100px;
8. border:1px solid #CCC;
10. font-size:0px;
12. line-height:100px;
14. margin:10px;
16. }
18. span {
20. display:inline-block;
22. height:80px; width:200px; background:#F5F5F5;
24. vertical-align:Middle;
26. overflow:hidden;
28. }
30. </style>
32. <div>
34. <span style="-webkit-transform:scale (0.5);" ></span>
36. </div>
38. <div>
40. <span style="
42. -webkit-transform-origin:top left;
44. -webkit-transform:scale (0.5);
46. "></span>
48. </div>
50. <div>
52. <span style="zoom:0.5;" ></span>
54. </div>