要實(shí)現(xiàn)圖片立體效果，可以借助CSS的transform屬性和perspective屬性。

首先，在CSS中選擇要應(yīng)用效果的圖片元素，為其設(shè)置transform-style: preserve-3d;，使其成為3D變換的容器。

img{
transform-style: preserve-3d;
}

接下來，為其設(shè)置transform: translateZ()，使其在Z軸上產(chǎn)生位移，實(shí)現(xiàn)在頁(yè)面上的立體效果。需要注意的是，這個(gè)值越大，圖片效果越明顯。

img:hover{
transform: translateZ(50px);
}

為了使立體效果更真實(shí)，我們還可以使用perspective屬性為元素設(shè)置透視值。這個(gè)屬性的值越小，立體效果就越明顯。

.container{
perspective: 800px;
}
img{
transform-style: preserve-3d;
}
img:hover{
transform: translateZ(50px);
}

最后，如果需要為圖片設(shè)置邊框，可以使用border屬性，但需要注意的是，為了不影響立體效果，要把邊框的透明度設(shè)置為0。

img{
transform-style: preserve-3d;
border: 2px solid rgba(0,0,0,0);
}
img:hover{
transform: translateZ(50px);
border: 2px solid rgba(0,0,0,1);
}

這樣一來，圖片立體效果就實(shí)現(xiàn)了。CSS的強(qiáng)大之處在于可以隨意組合變換效果，為頁(yè)面添加更多的視覺效果。這也是眾多設(shè)計(jì)師喜歡使用CSS的原因之一。