eirenaios eirenaios - 5 months ago 19
CSS Question

Zoom Vs. Scale in CSS3

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 does pretty much 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 dimention, 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







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

<div class="one"></div>
<div class="two"></div>




Answer

I've found another difference:

Zoom affects positioning differently in different browsers. For example

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

  • IE will not change the positioning
  • Chrome will apply specified zoom to position attributes resulting in left effectively being set to 50px * 50% = 25px (Note: this will never be reflected in the Computed Values of the debugger, but it will be visible)

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

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

  • Both Chrome and IE will multiply the position values by 150%. Effectively setting left to 50px*150% = 75px. (this will not be reflected in Computed Values either) To avoid this, just add transform-origin: 0 0 and the left value will remain at 50px.

Here's a comparison in fiddle, showing 2 boxes where the small one is zoomed or scaled to 50%

http://jsfiddle.net/4z728fmk/

enter image description here

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

Comments