CSS3照片墻是一種很好看的網頁布局，可以提高頁面的視覺效果。通過CSS3的transform屬性和transition屬性，可以實現很多炫酷的效果。下面我們來看看如何實現CSS3照片墻。

.photo-wall {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.photo-item {
position: relative;
width: 200px;
height: 200px;
margin: 10px;
overflow: hidden;
cursor: pointer;
transition: all 0.5s ease;
}
.photo-item:hover {
transform: scale(1.1) rotate(5deg);
z-index: 1;
}
.photo-item img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.5s ease;
}
.photo-item:hover img {
opacity: 0.6;
}

上面代碼中，.photo-wall是照片墻的容器，使用flex布局實現居中顯示，并使用flex-wrap: wrap;將內容排列到多行中。每個照片項的樣式通過.photo-item定義，設置了寬高、邊距、隱藏溢出部分和鼠標懸停的過渡效果。當鼠標懸停在照片上時，使用transform: scale(1.1) rotate(5deg);和z-index: 1;實現放大和旋轉的效果。

照片項中的圖片使用position: absolute;絕對定位，并設置width: 100%; height: 100%; object-fit: cover;讓圖片適應容器大小并裁剪不適合部分。同時為圖片設置與照片項相同的過渡效果，鼠標懸停時可以通過opacity: 0.6;降低圖片透明度實現半透明效果。

以上樣式只是照片墻的基本配置，還可以根據需求添加其它樣式來實現更多炫酷效果。CSS3照片墻可以應用于很多網站，如相冊、攝影、旅游等，增加頁面的吸引力和美觀程度。