缩放。缩放CSS3 [英] Zoom Vs. Scale in CSS3

问题描述

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

• 它们之间的相似点和区别是什么？




• 当规模？




• 这是更有效的使用方式，为什么？

我注意到了什么？

• 缩放它的中心和缩放它的左上方我想;




• 当我们使用它们缩放悬停时，缩放会缩放，尺度只会在悬停时收缩。
  - >> jsfiddle显示悬停效果 **

  * {-webkit-transition-duration：0.3s; -moz-转变持续时间：0.3s; -ms-transition-duration：0.3s; - 跃迁持续时间：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; position：absolute;}。one {top：10px; left：10px;背景：＃07a; -webkit-transform：scale（2）; -moz-transform：scale（2）; -ms-transform：scale（2）; -o-transform：scale（2）; transform：scale（2）; transform-origin：top left;}。两个{top：10px; left：100px;背景：#eee; zoom：200％;}  

 < div class = one>< / div>< div class =two>< / div>  

缩放

/ strong>会在不同的浏览器中影响定位。例如

position：absolute; left：50px;缩放：50％;

• IE不会更改左侧值


• Chrome会将左侧值更改为25像素。 （left = left * zoom），并且Devtools不告诉你这一点，计算值仍然会显示 left：50px ，但它是躺着。

转换在所有浏览器中的处理方式都一样（就我所知）。

position：absolute; left：50px; transform：scale（0.5）

• 在Chrome和IE中，Left有效地设置为25px。 （未在Devtools中反映）


• 要避免浏览器更改您的左侧值，只需使用 transform-origin：0 0 仍为50像素

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

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

I was looking for some css properties that i never used and came to know about zoom property of css3

• What is the similarities and difference between them?

• When to use Zoom and when scale? Both does pretty much same job.

• Which is more efficient to use and Why?

What have i noticed?

• both scales the object but default transform-origin for scale its center and for zoom its top-left i think;

• when we use them for scaling on hover, zoom will scale and again shrinks to the original dimention, while scale will only shrink on hover-out. -->> 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>

---

Some Stackoverflow QA

• What Does 'zoom' do in CSS?

• Zoom versus -transform scale

div {
  display: inline-block;
  height: 50px;
  width: 50px;
  position: absolute;
}
.one {
  top: 10px;
  left: 10px;
  background: #07a;
  -webkit-transform: scale(2);
  -moz-transform: scale(2);
  -ms-transform: scale(2);
  -o-transform: scale(2);
  transform: scale(2);
  transform-origin: top left;
}
.two {
  top: 10px;
  left: 100px;
  background: #eee;
  zoom: 200%;
}

<div class="one"></div>
<div class="two"></div>

解决方案

Transform is more predictable than zoom across browsers.

Zoom affects positioning differently in different browsers. For example

position:absolute; left:50px; zoom: 50%;

• IE will not change the left value
• Chrome will change the left value to 25px. (left = left * zoom) and Devtools does not tell you this, Computed Values will still display left: 50px, but it is lying.

Transform is handled the same way in all browsers (as far as I can tell).

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

• Left would effectively be set to 25px in both Chrome and IE. (not reflected in Devtools)
• To avoid the browser changing your left value, simply use transform-origin: 0 0 and left will remain 50px

Demo: http://jsfiddle.net/4z728fmk/ shows 2 boxes where the small one is zoomed or scaled to 50%. Looks like this:

edit: img updated 2016-06-16 with Firefox (nothing had change in Chrome or IE since last time)

这篇关于缩放。缩放CSS3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！