CSS3景深效果讓我們能夠?yàn)榫W(wǎng)頁(yè)添加更加生動(dòng)立體的立體效果，令人賞心悅目。景深可以讓元素在網(wǎng)頁(yè)上“呼之欲出”，讓人感覺視覺上的距離更加真實(shí)。

.box {
perspective: 1000px; /*設(shè)置景深*/
transform-style: preserve-3d; /*保持元素3d變換*/
}

通過(guò)使用CSS3的perspective屬性，我們可以設(shè)置透視點(diǎn)，進(jìn)而達(dá)到景深的效果。當(dāng)我們將元素的transform-style屬性設(shè)置為preserve-3d時(shí)，元素在3D空間中的位置將得以保存。

.box {
transform: translateZ(50px); /*向前移動(dòng)元素*/
}

我們可以通過(guò)transform屬性和translateZ方法來(lái)對(duì)元素進(jìn)行移動(dòng)。通過(guò)增大translateZ值，我們可以讓元素看起來(lái)更加接近用戶，反之則是遠(yuǎn)離用戶。不同元素的Z軸偏移將決定它們之間的景深關(guān)系。

.box:hover {
transform: translateZ(80px);
box-shadow: 0 0 20px #333; /*添加陰影，增強(qiáng)立體感*/
}

還可以通過(guò)添加hover效果，為元素增加更加生動(dòng)的立體效果。可以增加box-shadow屬性，讓元素與背景之間產(chǎn)生明顯的投影效果。這會(huì)讓元素看起來(lái)更加真實(shí)，同時(shí)也更加突出。