CSS3濾鏡是CSS3新增的一項功能,它可以實現各種視覺效果。其中,縮放是一種常見的濾鏡效果。通過縮放濾鏡,我們可以改變元素的大小,實現一些特殊的效果。
/* 縮放濾鏡的語法 */ element { transform: scale(X軸縮放比例, Y軸縮放比例); }
其中,X軸縮放比例和Y軸縮放比例都是一個數字。如果該數字為1,則不進行縮放;如果該數字大于1,則放大元素;如果該數字小于1,則縮小元素。下面是一個使用縮放濾鏡將圖片放大的例子:
/* 放大圖片的例子 */ img { transform: scale(2); }
上述代碼中,將圖片的X軸和Y軸縮放比例都設置為2,這樣就將圖片放大了2倍。我們還可以分別設置X軸和Y軸的縮放比例,以達到不同的效果。下面是一個使用縮放濾鏡將一個按鈕沿X軸縮小的例子:
/* 沿X軸縮小按鈕的例子 */ button { transform: scale(0.5, 1); }
上述代碼中,將按鈕的X軸縮放比例設置為0.5,Y軸縮放比例設置為1,這樣就將按鈕沿X軸縮小了一半。
上一篇css3火箭升天特效
下一篇css3炫酷旋轉特效教程