CSS里的scale()
函數可以用來改變元素的大小,實現縮放的效果。該函數常常與transform
屬性一起使用。
下面是一個例子,我們將一個圖片元素進行縮放:
img { transform: scale(0.5); }
這會將該圖片的寬度和高度縮小到原來的一半。如果我們想要只縮放寬度或高度,可以使用兩個參數來指定:
img { transform: scale(2, 0.5); }
這會將圖片的寬度擴大到原來的兩倍,同時縮小高度到原來的一半。
類似地,scale()
函數還可以用來創建動畫效果。我們可以在transition
屬性中指定scale()
函數的變化。
img { transition: all 0.3s ease-in-out; } img:hover { transform: scale(1.5); }
這會在鼠標懸停在圖片上時將其放大到原來的1.5倍,并使用0.3秒的緩動來實現平滑的過渡效果。
總之,scale()
函數是CSS中用來縮放元素的有用工具,它應該被廣泛使用。