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軸上的倍數。
以上的縮放點都是中心點。