变焦与变焦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

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%;

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

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

示例：

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

```
left
```
将有效地设置为
```
25px
```
。（DevTools 计算值不会反映这一点 - 它只会显示源代码）
为了避免更改
```
left
```
值，只需使用
```
transform-origin: 0 0
```
。这将确保 left 仍然是 50px。

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

comparison of zoom and transform in different browsers

编辑：2016 年添加了 Firefox。当时它是三个浏览器中问题最多的，因为

zoom:50%

根本没有任何效果。并且

transform: scale(0.5)

内框周围的边框具有不同的厚度......但这可能是子像素问题

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)

来代替。

Answer 5

TLDR；使用变换：缩放而不是缩放

我正在阅读和研究后整理所有答案。

╔═════════════════════════════╦════════════╦════════════════════════╗
║                             ║ Zoom       ║ Transform Scale        ║
╠═════════════════════════════╬════════════╬════════════════════════╣
║ CSS Animations              ║ No         ║ Yes                    ║
╠═════════════════════════════╬════════════╬════════════════════════╣
║ Cross Browser Compatibility ║ No         ║ Yes                    ║
╠═════════════════════════════╬════════════╬════════════════════════╣
║ Consistent Layout           ║ No         ║ Yes                    ║
╠═════════════════════════════╬════════════╬════════════════════════╣
║ Usage                       ║ zoom: 50%; ║ transform: scale(0.8); ║
║                             ║            ║ transform-origin: 0 0; ║
╚═════════════════════════════╩════════════╩════════════════════════╝

参考资料：

Answer 6

在布局方面，

zoom

和

scale

的工作方式截然不同。虽然

scale

按原样缩放元素，但

zoom

的工作方式类似于应用于特定元素的全局浏览器缩放。

变焦与变焦CSS3 中的缩放

问题描述投票：0回答：6

我注意到了什么？

一些 Stackoverflow QA

6个回答

最新问题

变焦与变焦CSS3 中的缩放

问题描述 投票：0回答：6

我注意到了什么？

一些 Stackoverflow QA

6个回答

最新问题

问题描述投票：0回答：6