变焦比。在 CSS3 中缩放

Posted 2023-02-16

技术标签:

【中文标题】变焦比。在 CSS3 中缩放【英文标题】：Zoom Vs. Scale in CSS3 【发布时间】：2014-12-16 19:28:24 【问题描述】：

我正在寻找一些我从未使用过的 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>

一些 *** 质量检查

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>

【问题讨论】：

【参考方案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 没有任何变化）

【讨论】：

谢谢您的帮助！ @vsync：问你就会收到！图片已更新。（事实证明 FF 是最有问题的，50% 的缩放没有效果，甚至无法在第二个框上正确渲染边框）对此进行了很好的解释。 @Drkawashima 你知道哪种方法对性能更好吗？【参考方案2】：

补充 Drkawashima 的回答：

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

【讨论】：

不错的补充。我现在更新了我的答案，包括一张图片，显示 FF 在缩放时如何失败【参考方案3】：

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

【讨论】：

【参考方案4】：

zoom 不是标准的 css 功能。

来自MDN：