Zoom Vs. Scale in CSS3

Issue

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>

---

Some Stackoverflow QA

• What Does 'zoom' do in CSS?

• Zoom versus -transform scale

div {
  display: inline-block;
  height: 50px;
  width: 50px;
}
.one {
  background: #07a;
  -webkit-transform: scale(2);
  -moz-transform: scale(2);
  -ms-transform: scale(2);
  -o-transform: scale(2);
  transform: scale(2);
  transform-origin: top top;
}
.two {
  background: #eee;
  zoom: 200%;
  margin-left:100px;
}

.three {
  background: #07a;
  transform-origin: top left;
  transition:all 0.6s ease;
}

.three:hover{
  -webkit-transform: scale(2);
  -moz-transform: scale(2);
  -ms-transform: scale(2);
  -o-transform: scale(2);
  transform: scale(2);
}

.four {
  background: #eee;
  transition:all 0.6s ease;
}

.four:hover{
  zoom: 200%;
}

<h4>Already zoomed and scalled</h4>
<div class="one"></div>
<div class="two"></div>
<hr>
<h4>Zoomed and Scalled on hover</h4>
<div class="three"></div>
<div class="four"></div>

Solution

Transform is more predictable than zoom across browsers.

Zoom affects positioning differently in different browsers.

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

• Chrome will effectively compute the left value to 50px * 50%, that is 25px...but this is not reflected in DevTools Computed Values.
• IE will not change the left value at all.

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. (DevTools Computed Values will not reflect this - it will display the source code only)
• 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: Added Firefox in 2016. At the time it was the most problematic browser out of the three, as zoom:50% had no effect at all. And with transform: scale(0.5) the borders around the inner box have different thickness... but that could be a subpixel issue

Answered By - Drkawashima