变焦比。在 CSS3 中缩放

Question

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

的 zoom 属性

• 它们有什么异同？

• 何时使用缩放以及何时缩放？两者的工作几乎相同。

• 哪个更有效，为什么？

我注意到了什么？

• 两者都缩放对象，但我认为默认的 transform-origin 用于缩放其中心并缩放其左上角；

• 当我们在悬停时使用它们进行缩放时，缩放会缩放并再次缩小到原始尺寸，而缩放只会在悬停时缩小。 -->> 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>

---

一些 Stackoverflow 质量检查

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

Answer 1

变换比跨浏览器缩放更容易预测。

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

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

• IE 根本不会更改 left 的值。
• Chrome 会将左值更改为25px。实际上它确实做到了left = left * zoom。但是 DevTools 中的 DevTools Computed Values 仍将显示 left: 50px，尽管由于缩放，这实际上不是真的。

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

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

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

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

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

Answer 2

补充 Drkawashima 的回答：

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

Answer 3

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

Answer 4

zoom 不是标准的 css 功能。

来自MDN：

此功能是非标准的，不在标准轨道上。不要 在面向 Web 的生产站点上使用它：它不适用于每个人 用户。之间也可能存在很大的不兼容 未来的实现和行为可能会发生变化。

请改用transform: scale(0.8)。