CSS設置景深是指通過改變元素的樣式表現出不同深度感受。景深的大小決定于視覺中心和位于遠處的元素之間的距離。CSS中可使用z-index屬性引導渲染圖層，并且使用translateZ屬性定義3D元素的深度。假設一個場景中有三個元素：一個背景、一個中間的元素和一個前景元素。如果設置中間的元素的z-index較高，則它位于背景和前景元素之間，給人以深度的感覺。

.background {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.middle-element {
position: relative;
z-index: 2;
transform: translateZ(100px);
}
.foreground {
position: absolute;
bottom: 0;
right: 0;
z-index: 1;
}

在上面的例子中，中間的元素使用了translateZ屬性，定義了元素的深度。它的z-index設置為2，使它顯示在背景和前景元素之間。最后，為了達到3D效果，需要使用perspective屬性設置元素的透視距離。透視距離定義了觀看者到元素的距離，較小的透視值會產生更強的3D效果。

.scene {
perspective: 100px;
}
.element {
transform: translateZ(50px);
}

在上述代碼中，場景元素的透視距離為100px，這意味著觀看者到元素的距離為100px。元素使用了translateZ屬性，定義了它的深度為50px，產生較強的3D效果。