缩放比例 在CSS3中缩放

Question

我正在寻找一些我从未使用过的css属性,并了解zoom了css3的属性

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

• 何时使用Zoom和缩放？两者的工作差不多.

• 哪个更有效使用,为什么？

我注意到了什么？

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

• 当我们在悬停时使用它们进行缩放时,缩放将缩放并再次缩小到原始维度,而缩放只会在悬停时缩小. - >> 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

• "缩放"在CSS中有什么作用？

• 缩放与转换比例

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

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

变换在所有浏览器中以相同的方式处理(据我所知).

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

• left将25px在Chrome和IE中有效设置.(再次,计算值仍然不会反映这一点,它会显示left:50px)
• 要避免更改left值,只需使用transform-origin: 0 0.这将确保左仍然是50px.

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

编辑:img已更新2016-06-16与Firefox(自上次以来Chrome或IE中没有任何变化)

Answer 2

Drkawashima答案的补充:

• zoom在Firefox中根本不起作用.见caniuse
• 曾几何时(童话故事在这里结束对不起),zoom: 1;是有助于调试IE6的强大声明.它赋予了它应用的元素一个内部"开关"到这个名为hasLayout的浏览器(不是CSS属性,只是像"clearfix"这样的概念).position: relative; zoom: 1;在旧项目中你会发现很多