天天看點

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軸上的倍數。

以上的縮放點都是中心點。