CSS 樣式是網頁設計中不可或缺的一部分，它能為網頁添加豐富的視覺效果。在本篇文章中，我們將探討如何使用 CSS 制作立體相冊。

/* 為相冊創建樣式 */
.album {
width: 500px;
height: 400px;
perspective: 800px;
position: relative;
margin: 0 auto;
}
/* 創建相片容器 */
.photo {
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 1s;
}
/* 創建相片正面的樣式 */
.photo-front,
.photo-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
/* 相片正面樣式設置 */
.photo-front {
background-color: #FFF;
transform: rotateY(0);
z-index: 2;
cursor: pointer;
}
/* 相片反面樣式設置 */
.photo-back {
background-color: #DDD;
transform: rotateY(180deg);
}
/* 懸停時的效果 */
.photo:hover {
transform: rotateY(-60deg);
}
/* 點擊時的效果 */
.clicked {
transform: rotateY(-120deg);
}

上述 CSS 代碼中，我們為相冊創建了一個包含所有相片的容器，該容器的 3D 效果和動畫效果都是基于 transform 技術實現的。每張相片都是一個獨立的容器，擁有自己的前面和后面，我們通過 transform 來切換相片的正面和反面。

每當用戶懸停在相片上時，該相片將會旋轉到一個特定的角度，并呈現出 3D 效果。同樣，當用戶點擊相片時，該相片將旋轉到另一個角度。

CSS 技術在網頁設計中的應用十分廣泛，使用它可以為網頁添加真實感和動態效果。上述代碼可以幫助你了解如何使用 CSS 制作立體相冊，同時也能啟發你對于其它項目的設計思路。