CSS3中的缩放与缩放

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

zoom

属性

• 它们之间有什么相似之处和不同之处

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

• 哪一种使用更有效？为什么

我注意到了什么？

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

• 当我们在悬停时使用缩放时，“缩放”将缩放并再次收缩到原始尺寸，而“缩放”仅在悬停时收缩。 **

*
{
-webkit转换持续时间：0.3s；
-moz转换持续时间：0.3s；
-ms转换持续时间：0.3s；
-o-过渡持续时间：0.3s；
过渡时间：0.3s；
}
盒子，盒子2
{
显示：内联块；
宽度：100px；
高度：100px；
利润率：20px；
}
箱
{
背景：#b00；
}
框：悬停
{
缩放：1.1；
}
框2
{
背景：#00b；
}
框2：悬停
{
-webkit转换：比例（1.1）；
-moz变换：比例（1.1）；
-ms变换：比例（1.1）；
-o变换：比例（1.1）；
转换：比例（1.1）；
}

---

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

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

例如：

位置：绝对位置；左：50px；变焦：50%


IE根本不会更改
left
值
Chrome会将左侧值更改为
25px
。实际上，它确实执行
left=left*缩放
。但是DevTools中的DevTools计算值仍将显示
left:50px
，尽管由于缩放的原因，这实际上不是真的

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

例如：
位置：绝对位置；左：50px；变换：比例（0.5）


在Chrome和IE中，
left
将有效地设置为
25px
（同样，计算值仍不会反映这一点，它将显示
left:50px
）
要避免更改
left
值，只需使用
变换原点：0
。这将确保左边仍然是50像素

演示：显示两个框，其中小框被放大或缩放到50%。看起来像这样：


编辑：img用Firefox更新了2016-06-16（自上次以来，Chrome或IE没有任何变化）
补充了川岛博士的答案：


zoom
在Firefox中根本不起作用。看
从前（童话故事到此结束，对不起），
zoom:1
是帮助调试IE6的强大声明。它赋予它应用的元素一个内部“开关”给这个名为hasLayout的浏览器（不是CSS属性，只是像“clearfix”这样的概念）。您将发现
位置：相对；缩放：1在旧项目中相当多

缩放
不适用于css动画或
转换
适当性：
缩放
不是标准的css功能

发件人：

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

改用
transform:scale（0.8）
。
谢谢您的帮助@问吧，你会得到的！图像更新。（原来FF是其中问题最大的，50%的缩放没有效果，而且它甚至无法在第二个框上正确渲染边框）对此有很好的解释。@Kawashima博士，你知道哪种方法对性能更好吗？添加得不错。我现在更新了我的答案，添加了一张显示FF在缩放时如何失败的图片