css3 倍数放大,CSS3 transform 缩放

1、transform:scale(x,y)

这是一个缩放的transform属性，y值可以省略，如果y值省略的话，那默认就和x值一样。

举例：

div{

width:300px;

height:300px;

background-color:#1B9AF7;

border-radius:10px;

position:absolute;

left:100px;

top:100px;

transition:all .2s;

}

div:hover{

transform:scale(1.1);

transition:all .2s;

}

这个例子的执行效果就是，当把指针hover到这个div上的时候，那这个div会放大到原来的1.1倍大。相应的，如果把值改为0.5，hover的时候x和y就会缩小到原来的二分之一。

需要注意的是它的transfom-origin是中心点

2、transformX:scale(x);

只缩放X轴上的倍数。

3、transformY:scale(y);

只缩放Y轴上的倍数。

以上的缩放点都是中心点。