CSS3動畫中的scale屬性是一種非常常用且強(qiáng)大的動畫效果,它可以改變元素的尺寸大小,從而實(shí)現(xiàn)各種效果。
/* 將元素的寬度、高度同時放大2倍 */ transform: scale(2, 2);
上述代碼會將元素的寬度和高度同時放大2倍。如果只想放大寬度或高度,可以只設(shè)置一個參數(shù)。
/* 只將元素的寬度放大2倍,而高度不變 */ transform: scale(2, 1);
另外,還可以通過設(shè)置transform-origin屬性來改變元素放縮的基準(zhǔn)點(diǎn)。
/* 設(shè)置基準(zhǔn)點(diǎn)為左上角 */ transform-origin: left top;
除了放大,scale屬性還可以通過設(shè)置小于1的值來縮小元素。而如果設(shè)置為負(fù)數(shù),則可以實(shí)現(xiàn)元素的鏡像效果。
/* 將元素水平鏡像 */ transform: scale(-1, 1);
總結(jié)來說,scale屬性是一個非常實(shí)用的CSS3動畫效果,可以用于實(shí)現(xiàn)多種效果,如放大、縮小和鏡像。