CSS實(shí)現(xiàn)層疊照片墻，可以讓網(wǎng)頁(yè)更加生動(dòng)有趣。大家可能已經(jīng)見過(guò)一些網(wǎng)站使用CSS實(shí)現(xiàn)的照片墻，這里我們來(lái)學(xué)習(xí)一下該如何實(shí)現(xiàn)。

HTML結(jié)構(gòu)：
<div class="photo-wall">
<div class="photo"></div>
<div class="photo"></div>
...
</div>
CSS樣式：
.photo-wall {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background-color: #e8e8e8;
padding: 10px;
}
.photo {
width: 200px;
height: 200px;
background-image: url("https://example.com/image.jpg");
background-size: cover;
background-position: center;
margin: 5px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
transform-origin: top center;
transition: all 0.5s;
}
.photo:hover {
transform: translateY(-20px) rotateX(90deg);
z-index: 1;
}

首先，我們需要一個(gè)容器來(lái)放置照片墻，這里我們使用一個(gè)class為photo-wall的div。使用flex布局可以方便地控制照片的位置與大小。我們把每一張照片放在一個(gè)class為photo的div中，設(shè)置照片的寬高、背景圖和陰影等樣式。當(dāng)鼠標(biāo)懸停在照片上時(shí)，通過(guò)CSS3的transform屬性，照片會(huì)向上移動(dòng)一定距離并旋轉(zhuǎn)90度。

總的來(lái)說(shuō)，使用CSS實(shí)現(xiàn)層疊照片墻的效果很簡(jiǎn)單，但是需要注意一些細(xì)節(jié)。比如要設(shè)置好容器的大小、照片的大小和間距以及照片的transform屬性。