CSS 变焦对比 在 CSS3 中缩放

Zoom Vs. Scale in CSS3

提问by eirenaios

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

我正在寻找一些我从未使用过的 css 属性，并开始了解css3 的zoom属性

• 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**

• 两者都缩放对象，但我认为默认变换原点用于缩放其中心和缩放其左上角；

• 当我们使用它们在悬停时缩放时，缩放会缩放并再次缩小到原始尺寸，而缩放只会在悬停时缩小。 -->> jsfiddle 显示悬停效果**

*
{
    -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

一些 Stackoverflow QA

• What Does 'zoom' do in CSS?

• Zoom versus -transform scale

• CSS中的“缩放”有什么作用？

• 缩放与变换比例

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>

回答by Drkawashima

Transform is more predictable than zoom across browsers.

转换比跨浏览器缩放更可预测。

Zoom affects positioningdifferently in different browsers.

缩放对不同浏览器中的定位有不同的影响。

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

例子： position:absolute; left:50px; zoom: 50%;

• IE will not change the leftvalue 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.

• IE 根本不会更改该left值。
• Chrome 会将左值更改为25px. 它确实做到了left = left * zoom。但 DevTools 中的 DevTools Computed Values 仍将显示left: 50px，即使由于缩放而实际上并非如此。

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

Transform 在所有浏览器中的处理方式相同（据我所知）。

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

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

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

• left将25px在 Chrome 和 IE 中有效地设置为。（同样，计算值仍然不会反映这一点，它会显示left:50px）
• 为避免更改left值，只需使用transform-origin: 0 0. 这将确保 left 仍然是 50px。

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

演示：http: //jsfiddle.net/4z728fmk/显示了 2 个盒子，其中小盒子被放大或缩放到 50%。看起来像这样：

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

编辑：img 于 2016-06-16 用 Firefox 更新（自上次以来 Chrome 或 IE 没有任何变化）

回答by FelipeAls

Complementary to Drkawashima's answer:

补充 Drkawashima 的回答：

• zoomdoesn't work in Firefox at all. See caniuse
• Once upon a time(fairy tale ends here sorry), zoom: 1;was the mighty declaration that helped to debug IE6. It conferred the element it was applied an internal "switch" to this browser named hasLayout (not a CSS property, just a concept like "clearfix" is). You'll find position: relative; zoom: 1;quite a lot in old projects

• zoom在 Firefox 中根本不起作用。见caniuse
• 曾几何时（对不起，童话到此结束），zoom: 1;是有助于调试 IE6 的强大声明。它赋予它所应用的元素一个名为 hasLayout 的浏览器的内部“开关”（不是 CSS 属性，只是像“clearfix”这样的概念）。你会position: relative; zoom: 1;在旧项目中找到很多

回答by Ustym Ukhman

zoomdoes not work with css animations or transitionpropriety: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

zoom不适用于 css 动画或transition属性：https: //developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties