CSS可以制作很多有趣的效果，比如3D照片墻，今天我們就來學習如何制作一個3D照片墻。

.photo-wall {
display: flex;
flex-wrap: wrap;
width: 60%;
margin: auto;
}
.photo {
width: 30%;
height: 250px;
margin: 20px;
position: relative;
perspective: 1000px;
}
.photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.photo .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
transform-origin: bottom;
transform: rotateX(-90deg);
transition: transform 0.5s;
}
.photo:hover .overlay {
transform: rotateX(0deg);
}
.photo .text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: white;
font-size: 20px;
font-weight: bold;
}

我們首先要建立一個照片墻的容器，設置為flex布局，并使照片自動換行。接著，我們需要給每張照片一個寬度和高度，并將其設為相對定位。為了呈現3D效果，我們需要設置透視點。

每張照片都是通過img元素實現的，我們設置圖片寬度和高度都為100%。同時，我們使用偽類為每張照片添加一個覆蓋層，并將其背景色設為半透明黑色，以便于顯示上面文字。

我們在hover的時候，通過旋轉覆蓋層，實現一個翻轉的效果。最后，我們為文字添加了絕對定位，將其置于照片中心。

這樣，一個3D照片墻就可以搭建完成了，有了這個技能，你可以為你的網站添加更加生動有趣的效果。