CSS3新增样式大解析：[5]scale之元素缩放

1、先放样版文件：代码：<!--style--><style>.demo { margin:100px auto; width:300px; height:200px; background:#ededed; position:relative; -webkit-transform:scale(1.5)}.children {top:100px ;border:1px dashed #ededed; width:300px; height:200px; position:absolute; left:809px; opacity:0.8;}</style><!--HTML--><div class="demo"> <img src="images/4.jpg" height="200px" /></div><div class="children"> <img src="images/4.jpg" height="200px" /></div>上面的这两个div都包含了同一张图片。另外对children进行了绝对定位使其与demo相重合，显示的效果就是两个div喝到了一起哦，具体如下图。（说明children的left值是依据我电脑屏幕的大小和浏览器调整的，不同的电脑显示的位置不同可能是不重合的呢，各位操练的时候需要自行调整）

2、现在来讲解Scale属性scale属性的取值为2个，它本身其实相当于一个函数，因为它的写法就和函数一样：scale();scale(x);scale(x,y);

3、我们先来讲scale取值为两个的情况：现在我对class名为demo的div应用transform：scale（1.5,1.5）；然后对children应用opacity：0.8，方便进行对比。观察到效果：很明显demo的图片以中心为原点向XY轴的两向都扩大了，而且扩大的倍数正好是原来的1.5倍。于是我们可以知道，两个参数以为着同时对元素的宽和高进行缩放。大家可以试试传入不同的数值。

4、再看看scale（）取值为1个的情况：取值为1个又分为两种情况1）一种是：scale（1.5）；实际上它的效果和scale（1.5,1.5）的效果相同，默认的，由于X轴和Y轴的缩放是一样的因此可以省写一个值即可。

5、2）取值的另一种是对X、Y轴缩放的分开写法，即采用到scaleX（1.5）、scaleY（1.5）；他们分别表示的是对元素进行X轴方向放大1.5倍和对Y轴方向放大1.5倍。效果看图哦

6、说明：1）scale当中的值若大于1表示放大，小于1表示缩小。2）可以传入0，此时元素将不可见。3）可以传入负值，除了会改变元素原本所有的方向，其余与传入正值一样（如图，采用了scaleY（-2）。）。