CSS是網頁設計中不可或缺的一部分。它的強大之處在于可以實現各種各樣的特效，比如3D相冊旋轉效果。下面就讓我們通過代碼的形式來學習一下CSS如何實現這個效果。

/*HTML*/
/*CSS*/
.container {
perspective: 1000px; /* 3D景深設置 */
}
.photo {
position: absolute; /* 定位 */
width: 200px; /* 尺寸 */
height: 300px;
transform-style: preserve-3d; /* 保持3D結構不變 */
transition: transform 1s; /* 過渡效果 */
}
.photo:nth-of-type(1) {
transform: rotateY(0deg) translateZ(300px); /* 旋轉和平移 */
}
.photo:nth-of-type(2) {
transform: rotateY(90deg) translateZ(300px);
}
.photo:nth-of-type(3) {
transform: rotateY(180deg) translateZ(300px);
}
.photo:nth-of-type(4) {
transform: rotateY(270deg) translateZ(300px);
}
.photo:hover {
transform: rotateY(360deg); /* 鼠標懸停效果 */
}

以上是HTML和CSS的代碼，其中主要是通過CSS的transform屬性實現的。容器元素使用perspective屬性來設置3D景深，讓內部的元素看起來有深度感。photo元素使用translateZ屬性來沿Z軸平移，同時使用rotateY屬性繞Y軸旋轉。hover偽類用來為photo元素添加鼠標懸停效果。通過組合不同的translateZ和rotateY值，可以實現各種不同的旋轉效果。

總的來說，通過CSS實現3D相冊旋轉效果并不難，但需要理解CSS的transform屬性和3D空間的概念。掌握了這些基礎知識之后，就可以自由地進行各種特效的設計和實現。