CSS旋轉(zhuǎn)相冊是一種動態(tài)展示圖片的方法。它可以讓圖片在不同的角度和位置上展示，使得圖片展示更加生動、直觀、有趣。

首先，需要在HTML中創(chuàng)建一個相冊容器，使用div標(biāo)簽來完成這個工作。

<div class="album">
<img src="img1.jpg" alt="圖片1">
<img src="img2.jpg" alt="圖片2">
<img src="img3.jpg" alt="圖片3">
<img src="img4.jpg" alt="圖片4">
</div>

上面的代碼中，我們創(chuàng)建了一個class為“album”的div標(biāo)簽，內(nèi)部包含了四個img標(biāo)簽，分別代表四個圖片。現(xiàn)在，我們需要通過CSS來實現(xiàn)旋轉(zhuǎn)相冊的效果。

.album {
perspective: 1000px;
}
.album img {
width: 200px;
height: 200px;
position: absolute;
top: 0;
left: 0;
transform: rotateY(0deg) translateZ(300px);
transition: transform 1s ease-in-out;
}
.album img:nth-child(2) {
transform: rotateY(90deg) translateZ(300px);
}
.album img:nth-child(3) {
transform: rotateY(180deg) translateZ(300px);
}
.album img:nth-child(4) {
transform: rotateY(270deg) translateZ(300px);
}

上面的代碼中，我們?yōu)閏lass為“album”的div標(biāo)簽設(shè)置了透視距離為1000像素，這樣可以讓圖片看起來更加真實。而img標(biāo)簽則使用了absolute定位，并通過translateZ屬性將其移動到了相冊背后300像素的位置，即只有當(dāng)圖片被旋轉(zhuǎn)后，才會出現(xiàn)在相冊里。

接下來，我們?yōu)槊總€img標(biāo)簽設(shè)置不同角度的旋轉(zhuǎn)，從而形成旋轉(zhuǎn)相冊的效果。其中，transform: rotateY(0deg)代表圖片沒有旋轉(zhuǎn)，transform: rotateY(90deg)代表圖片向右旋轉(zhuǎn)90度，transform: rotateY(180deg)代表圖片向后旋轉(zhuǎn)180度，transform: rotateY(270deg)代表圖片向左旋轉(zhuǎn)90度。

最后，我們?yōu)槊總€img標(biāo)簽設(shè)置了transition屬性，讓旋轉(zhuǎn)的過程更加平滑自然。

現(xiàn)在，我們已經(jīng)成功實現(xiàn)了CSS旋轉(zhuǎn)相冊的效果。當(dāng)然，如果你想要更加自定義化地效果，可以通過調(diào)整transform屬性、添加濾鏡、調(diào)整背景色等方式來實現(xiàn)。