css - 变焦比。在 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 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>

Answer 1

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

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

例子:position:absolute；左:50px；缩放:50%；

• Chrome 会有效地将 left 值计算为 50px * 50%，即 25px...但这并没有反射(reflect)在 DevTools 中计算值。
• IE 根本不会改变 left 值。

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

例子:position:absolute；左:50px；变换:缩放(0.5)

• left 在 Chrome 和 IE 中有效地设置为 25px。 (DevTools 计算值不会反射(reflect)这一点 - 它只会显示源代码)
• 要避免更改 left 值，只需使用 transform-origin: 0 0。这将确保左边仍然是 50 像素。

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

编辑:在 2016 年添加了 Firefox。当时它是​​三个浏览器中问题最严重的浏览器，因为 zoom:50% 根本没有效果。使用 transform: scale(0.5) 内部框周围的边框具有不同的厚度......但这可能是一个子像素问题