HTML 3D旋轉相冊可以讓網頁更加生動有趣，實現這個效果需要運用HTML、CSS以及JavaScript語言的知識。下面是一個簡單的HTML 3D旋轉相冊的制作代碼：

首先，我們需要創建一個包含圖片和標題的HTML結構，代碼如下:

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

我們需要使用CSS來設置相冊的樣式和布局，為實現3D旋轉效果需要使用CSS的transform屬性，代碼如下：

.album {
display: flex;
flex-wrap: wrap;
perspective: 800px;
margin: 0 auto;
width: 80%;
max-width: 1000px;
padding: 10px;
}
.album__item {
position: relative;
margin: 10px;
border: 1px solid #ccc;
height: 200px;
width: calc(25% - 20px);
text-align: center;
transition: transform 0.5s;
transform-style: preserve-3d;
transform-origin: center center -100px;
}
.album__item:hover {
transform: rotateY(360deg);
}
.album__img {
height: 100%;
width: 100%;
object-fit: cover;
}
.album__caption {
position: absolute;
bottom: 0;
width: 100%;
font-size: 16px;
background-color: #333;
color: #fff;
padding: 5px;
opacity: 0.8;
}

最后，我們需要使用JavaScript代碼來控制相冊旋轉的角度，代碼如下：

const album = document.querySelector('.album');
let rotateY = 0;
function rotate() {
rotateY += 90;
album.style.transform = `rotateY(${rotateY}deg)`;
}
setInterval(rotate, 3000);

使用以上的HTML、CSS和JavaScript代碼，即可制作出簡單的3D旋轉相冊效果。