变焦比。在 CSS3 中缩放

Question

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

• 它们之间有什么相同点和不同点？

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

• 哪个使用效率更高，为什么？

我注意到了什么？

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

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

---

一些 Stackoverflow QA

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

原文由 Suresh Karia 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

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

• Chrome 将有效地将 left 值计算为 50px * 50% ，即 25px …但这并未反映在 DevTools 计算值中。
• IE 根本不会改变 left 值。

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

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

• left 25px 。 （同样，计算值仍然不能反映这一点，它将显示 left:50px ）
• 为避免更改 left 值，只需使用 transform-origin: 0 0 。这将确保 left 仍然是 50px。

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

编辑：在 2016 年添加了 Firefox

原文由 Drkawashima 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

对 Drkawashima 的回答的补充：

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

原文由 FelipeAls 发布，翻译遵循 CC BY-SA 3.0 许可协议