1、transform:scale(x,y)
这是一个缩放的transform属性，y值可以省略，如果y值省略的话，那默认就和x值一样。
举例：
<style>
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;
}
</style>
<body>
<div></div>
</body>
这个例子的执行效果就是，当把指针hover到这个div上的时候，那这个div会放大到原来的1.1倍大。相应的，如果把值改为0.5，hover的时候x和y就会缩小到原来的二分之一。
需要注意的是它的transfom-origin是中心点
2、transformX:scale(x);
只缩放X轴上的倍数。
3、transformY:scale(y);
只缩放Y轴上的倍数。
以上的缩放点都是中心点。
网友评论