一、scale()方法

缩放，指的是“缩小”和“放大”。在CSS3中，我们可以使用scale()方法来将元素根据中心原点进行缩放。

跟translate()方法一样，缩放scale()方法也有3种情况：

（1）scaleX(x)：元素仅水平方向缩放（X轴缩放）；

（2）scaleY(y)：元素仅垂直方向缩放（Y轴缩放）；

（3）scale(x,y)：元素水平方向和垂直方向同时缩放（X轴和Y轴同时缩放）；

1、scaleX(x)

语法：

transform:scaleX(x)

说明：

x表示元素沿着水平方向（X轴）缩放的倍数，如果大于1就代表放大；如果小于1就代表缩小。

大家想想倍数是怎样一个概念就很好理解了。

2、scaleY(y)

语法：

transform:scaleY(y)

说明：

y表示元素沿着垂直方向（Y轴）缩放的倍数，如果大于1就代表放大；如果小于1就代表缩小。

3、scale(x,y)

语法：

transform:scale(x,y)

说明：

x表示元素沿着水平方向（X轴）缩放的倍数，y表示元素沿着垂直方向（Y轴）缩放的倍数。

注意，Y是一个可选参数，如果没有设置Y值，则表示X、Y两个方向的缩放倍数是一样的（同时放大相同倍数）。

举例：

在浏览器预览效果如下：

分析：

从上图可以看出，元素沿着X轴方向放大了1.5倍（两个方向同时延伸，整体放大1.5倍）。

当使用上面代码时，在浏览器预览效果如下：

二、CSS中两种放大zoom和scale的区别

1、先说原理

zoom和scale这两个东西都是用于对元素的缩放，但两者除了兼容性之外还有一些不同的地方。

zoom缩放会将元素保持在左上角，而scale默认是中间位置，可以通过transform-origin来设置。

另外他们执行的渲染顺序也不同，zoom可能影响到盒子的计算。

2、我们看个例子

这是几行伪代码

<style>
	div {
	  width:300px;height:100px;
	  border:1px solid red;
	  font-size:0px;
	  line-height:100px;
	  margin:10px;
	}
	span {
	  display:inline-block;
	  height:80px;width:200px;background:blue;
	  vertical-align:middle;
	  overflow:hidden;
	}
</style>

<div>
  <span style="-webkit-transform:scale(0.5);"></span>
</div>
<div>
  <span style="
    -webkit-transform-origin:top left;
    -webkit-transform:scale(0.5);
  "></span>
</div>
<div>
  <span style="zoom:0.5;">
  </span>
</div>

下面看效果

稍微解释一下

第一个测试中只设置了scale，于是元素以自己的中心为基点做缩放。

第二个测试中不仅设置了scale，还有origin来将缩放的基点设置到左上角，因此变化结束后元素呆在了左上角。虽然容器设置了和高度一样的行高，但它并没有在容器里居中，因为scale是先布局后变换的，变换不会对布局产生影响。

最后一个测试是使用zoom，虽然Firefox上不支持，但这是个很古老的特性了。它和第二个测试的区别是它先缩放，后计算布局。所以在例子中它得到了垂直居中效果。