The difference between zoom and scale in CSS

zoomAndscaleThese two things are used to scale the elements, but there are a couple of different places in addition to compatibility.zoomZooming keeps the element in the upper-left corner, while thescaleThe default is the middle position, which can betransform-originTo set. In addition, they perform different rendering orders.zoomMay affect the calculation of the box.
Run<! DOCTYPE html>
<style>
div {
Width:300px;Height:100px;
Border:1pxSolid#CCC;
Font-size:0px;
Line-height:100px;
Margin:10px;
}
span {
Display:Inline-block;
Height:80px;width:200px;background:#F5F5F5;
Vertical-align:Middle;
Overflow:Hidden;
}
</style>
<div>
<spanstyle="-webkit-transform:scale (0.5);"></span>
</div>
<div>
<spanstyle="
-webkit-transform-origin:top left;
-webkit-transform:scale (0.5);
"></span>
</div>
<div>
<spanstyle="zoom:0.5;"></span>
</div>
The first test only sets thescale, and the elements are scaled based on their own center point. The second Test not only sets thescaleAnd alsooriginTo set the base point of the zoom to the upper-left corner, so the element stays in the upper-left corner after the change is over. Although the container is set to the same height as the High Line, when it is not centered in the container, becausescaleIs the first layout after the transformation, the transformation will not affect the layout. The last test is to use thezoom, although not supported on Firefox, this is a very old feature. The difference between it and the second test is that it scales first, then calculates the layout. So in the example it gets the vertical center effect.

Differences between zoom and scale in CSS