CSS3中的transform屬性可以用來對元素進行旋轉、縮放、平移、傾斜等變換操作,而其中的scale()函數則可以讓元素按比例進行縮放操作,從而實現近大遠小的效果。
具體來說,通過scale()函數可以將元素在X軸和Y軸方向上進行縮放,而使用一個小于1的值可以實現縮小效果,使用一個大于1的值可以實現放大效果,而使用不同的值可以實現不同形態的變形效果。
.circle { position: relative; width: 50px; height: 50px; border-radius: 50%; background: red; animation: rotate 3s linear infinite; } @keyframes rotate { from { transform: scale(1); } to { transform: scale(.5); } }
上述代碼實現了一個圓形元素進行旋轉并且近大遠小的動畫效果。具體來說,通過設置元素的初始大小為1,并且設置動畫中逐漸縮小元素的大小直至0.5,從而實現了近大遠小的效果,此外還可以通過設置動畫屬性使元素進行旋轉,讓整個過程更加生動。
綜上所述,CSS3中的scale()函數提供了一種簡單有效的方式進行元素縮放操作,并且可以通過動畫屬性將其與旋轉等操作結合起來,從而實現各種有趣的效果。