CSS中最常見(jiàn)的一個(gè)效果就是讓元素在顯示時(shí)近大遠(yuǎn)小，這被稱(chēng)為縮放或者透視效果。實(shí)現(xiàn)這個(gè)效果有多種方法，下面我們來(lái)一一介紹。

一、使用transform屬性

.transform {
transform: scale(1, 0.5); /* 水平方向不變，垂直方向縮放0.5 */
}

二、使用perspective和transform屬性

.perspective {
perspective: 800px; /* 定義透視點(diǎn)，這里設(shè)為800像素 */
transform: translateZ(-200px) scale(0.5); /* 將元素向內(nèi)移動(dòng)200像素再縮放為原來(lái)的一半 */
}

三、使用css3的scale()函數(shù)

.scale {
transform: scale(0.5); /* 直接使用scale函數(shù)縮放為原來(lái)的一半 */
}

四、使用animation屬性

@keyframes zoom {
from {
transform: scale(0);
}
to {
transform: scale(1);
}
}
.zoom {
animation: zoom 2s; /* 定義縮放動(dòng)畫(huà)，持續(xù)2秒鐘 */
}

以上四種方法都可以實(shí)現(xiàn)透視效果，選擇哪種方式取決于實(shí)際需求和使用場(chǎng)景。