3D立方體相冊是一個很酷的特效，它可以讓你在網頁上展示你的照片，同時還能夠給人以視覺上的沖擊感。下面是一個基于 HTML 代碼的 3D立方體相冊實現：

<div class="cube">
<div class="cube__face cube__face--front">Front</div>
<div class="cube__face cube__face--back">Back</div>
<div class="cube__face cube__face--right">Right</div>
<div class="cube__face cube__face--left">Left</div>
<div class="cube__face cube__face--top">Top</div>
<div class="cube__face cube__face--bottom">Bottom</div>
</div>
<style>
.cube{
position:relative;
margin:auto;
width:100px;
height:100px;
transform-style:preserve-3d;
transition:1s;
}
.cube__face{
position:absolute;
width:100%;
height:100%;
text-align:center;
line-height:100px;
font-size:2rem;
color:white;
background-color:rgba(255,255,255,0.9);
border:1px solid white;
}
.cube__face--front{
transform:translateZ(50px);
}
.cube__face--back{
transform:translateZ(-50px) rotateY(180deg);
}
.cube__face--right{
transform:rotateY(90deg) translateZ(50px);
}
.cube__face--left{
transform:rotateY(-90deg) translateZ(50px);
}
.cube__face--top{
transform:rotateX(-90deg) translateZ(50px);
}
.cube__face--bottom{
transform:rotateX(90deg) translateZ(50px);
}
.cube:hover{
transform:rotateY(360deg);
}
</style>

代碼中，我們首先定義了一個 div 元素，并將其class屬性設置為cube，然后在 div 元素內部定義了六個面，每個面都是一個 div 元素，分別設置了不同的class屬性，以便于我們通過 CSS 來進行樣式控制。

在 CSS 中，我們對父元素 .cube 設置了一些樣式，如 position、width、height 等，其中最重要的是 transform-style 屬性，它表示元素是否應套用其子元素的 3D 變換。我們設置此屬性值為 preserve-3d，以便子元素 div 相對于父元素 cube 進行 3D 變換。同時還對所有 .cube__face 類的元素設置了一些樣式，包括 position、width、height、text-align、line-height、background-color 等，這些樣式用于調整每個面的顯示效果。

在每個 .cube__face 類的元素中，我們通過 transform 屬性來設置元素的 3D 變換效果，具體實現與方向相關。例如，.cube__face--front 元素的 transform 屬性為 translateZ(50px)，表示在 Z 軸方向上移動 50px，這樣該元素就顯示在立方體的前面。

最后，我們還在 .cube:hover 賦予了旋轉效果，一旦鼠標指針懸停在元素上，就會觸發這個效果，給人一種立方體在旋轉的視覺效果。