css - Zoom Vs. Scale in CSS3

Question

I was looking for some css properties that I never used and came to know about zoom property of css3

• What is the similarities and difference between them?

• When to use Zoom and when scale? Both do pretty much the same job.

• Which is more efficient to use and why?

What have I noticed?

• both scales the object but default transform-origin for scale its center and for zoom its top-left I think;

• when we use them for scaling on hover, zoom will scale and again shrinks to the original dimension, while scale will only shrink on hover-out. -->> jsfiddle showing hover effectst**

*
{
    -webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-ms-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
}

box, box2
{
    display: inline-block;
    width: 100px;
    height: 100px;
    
    margin: 20px;
}

box
{
    background: #b00;
}

box:hover
{
    zoom: 1.1;
}

box2
{
    background: #00b;
}

box2:hover
{
    -webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}

<box></box>
<box2></box2>

Answer 1

Transform is more predictable than zoom across browsers.

Zoom affects positioning differently in different browsers.

example: position:absolute; left:50px; zoom: 50%;

• IE will not change the left value at all.
• Chrome will change the left value to 25px. Effectively it does do left = left * zoom. But DevTools Computed Values in DevTools will still display left: 50px, even though that is effectively not true due to the zoom.

Transform is handled the same way in all browsers (as far as I can tell).

example: position:absolute; left:50px; transform: scale(0.5)

• left would effectively be set to 25px in both Chrome and IE. (again, computed values will still not reflect this, it will display left:50px)
• To avoid changing the left value, simply use transform-origin: 0 0. That will ensure left is still 50px.

Demo: http://jsfiddle.net/4z728fmk/ shows 2 boxes where the small one is zoomed or scaled to 50%. Looks like this:

edit: img updated 2016-06-16 with Firefox (nothing had change in Chrome or IE since last time)