CSS3-转换之scale

在讲解之前，我们先将我们要变换的元素看做一个正方体，为了方便理解，我标注了XYZ轴以及方向，如下图：

1、 scaleX(x)

通过设置X轴值来定义缩放转换，效果如下图：

沿着X轴缩小，俯视图如上。

2、 scaleY(y)

通过设置y轴值来定义缩放转换，效果如下图：

沿着Y轴缩小，俯视图如上。

3、scale(x,y)

定义2D缩放转换，默认值为1，当大于1时，元素放大，当小于1大于0时，元素缩小。效果如下：

沿着X和Y轴缩小，俯视图如上。

4、 scaleZ(z)

通过设置z轴值来定义缩放转换，效果如下：

从上图可以看到，俯视图并未有任何变化，为什么呢？其实我们只要把元素看做一个正方体，那么Z轴方向的缩放就相当于正方体厚度的变化，俯视图当然是看不出来的。

5、scale3d(x,y,z)

定义3D缩放转换，效果如下：

scale3d(x,y,z)是综合上述效果，原理同上。

如有错误，请道友指正，非常感谢！