缩放比例在CSS3中缩放

Question

我正在寻找一些我从未使用过的css属性，并了解了 css3 的<{1}}属性

• 它们之间有什么相似之处和区别？

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

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

我注意到了什么？

• 既可以缩放对象，也可以使用默认的transform-origin来缩放它的中心，然后缩放它的左上角我认为;

• 当我们在悬停时使用它们进行缩放时，缩放将缩放并再次缩小到原始维度，而缩放只会在悬停时缩小。 -->> jsfiddle showing hover effectst **

zoom

*
{
    -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);
}

---

一些Stackoverflow QA

• What Does 'zoom' do in CSS?

• Zoom versus -transform scale

<box></box>
<box2></box2>

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

Answer 1

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

缩放会在不同浏览器中以不同方式影响定位。

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

• IE根本不会更改left值。
• Chrome会将左侧值更改为25px。实际上它确实left = left * zoom。但DevTools中的DevTools计算值仍会显示left: 50px，即使由于缩放而实际上并非如此。

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

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

在Chrome和IE中，
• left实际上会设置为25px。 （同样，计算值仍然不会反映这一点，它会显示left:50px）
• 要避免更改left值，只需使用transform-origin: 0 0即可。这将确保左派仍然是50px。

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

编辑：img使用Firefox更新2016-06-16（自上次以来Chrome或IE中没有任何变化）

Answer 2

Drkawashima答案的补充：

• zoom根本不在Firefox中工作。请参阅caniuse
• 曾几何时（童话故事在此结束对不起），zoom: 1;是帮助调试IE6的强大声明。它赋予它应用的元素一个内部＆＃34;开关＆＃34;这个名为hasLayout的浏览器（不是CSS属性，只是像＆＃34; clearfix＆＃34;这样的概念）。您将在旧项目中找到position: relative; zoom: 1;相当多的内容

Answer 3

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

Answer 4

zoom不是标准的CSS功能。

来自MDN：

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

改为使用transform: scale(0.8)。