3D相冊是一種非常時尚和優美的展示圖片的方式。而CSS是一種很好的實現3D相冊效果的工具。下面我們來介紹一下3D相冊的CSS代碼。

/* 容器 */
.container {
position: relative;
margin: 0 auto;
height: 400px;
width: 600px;
perspective: 600px;
}
/* 圖片框 */
.box {
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: transform 1s;
}
/* 圖片項 */
.item {
position: absolute;
width: 400px;
height: 200px;
line-height: 200px;
font-size: 4em;
text-align: center;
color: white;
font-weight: bold;
background: rgba(0, 0, 0, 0.5);
box-sizing: border-box;
padding: 20px;
border: 5px solid white;
}
/* 圖片項1 */
.item1 {
transform: rotateY(0deg) translateZ(200px);
}
/* 圖片項2 */
.item2 {
transform: rotateY(60deg) translateZ(200px);
}
/* 圖片項3 */
.item3 {
transform: rotateY(120deg) translateZ(200px);
}
/* 圖片項4 */
.item4 {
transform: rotateY(180deg) translateZ(200px);
}
/* 圖片項5 */
.item5 {
transform: rotateY(-60deg) translateZ(200px);
}
/* 圖片項6 */
.item6 {
transform: rotateY(-120deg) translateZ(200px);
}
/* 鼠標懸浮 */
.container:hover .box {
transform: rotateY(90deg);
}

以上代碼是一個基本的3D相冊，我們給它加上了容器、圖片框、圖片項等元素，并使用了transform:rotateY來實現了3D效果。同時，當鼠標懸浮在相冊上時，圖片會發生翻轉效果。