HTML3D立體相冊(cè)是一種以HTML5和CSS3技術(shù)為基礎(chǔ)，通過3D的空間視覺效果來展示照片的相冊(cè)。
其源代碼如下：
<!DOCTYPE html>
<html>
<head>
<title>HTML3D立體相冊(cè)</title>
<style>
#container {
perspective: 1000px;
}
.card {
width: 240px;
height: 300px;
position: relative;
transform-style: preserve-3d;
transition: transform 0.8s;
}
.card:hover {
transform: rotateY(180deg);
}
.card .front {
width: inherit;
height: inherit;
backface-visibility: hidden;
position: absolute;
z-index: 2;
background-color: #F5F5F5;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
}
.card .back {
width: inherit;
height: inherit;
backface-visibility: hidden;
position: absolute;
z-index: 1;
transform: rotateY(180deg);
background: url('photo.jpg') center center no-repeat;
background-size: cover;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
}
</style>
</head>
<body>
<div id="container">
<div class="card">
<div class="front">
<h2>照片1</h2>
<p>這是一張美麗的風(fēng)景照片。</p>
</div>
<div class="back"></div>
</div>
<div class="card">
<div class="front">
<h2>照片2</h2>
<p>這是一張可愛的動(dòng)物照片。</p>
</div>
<div class="back"></div>
</div>
<div class="card">
<div class="front">
<h2>照片3</h2>
<p>這是一張精美的建筑照片。</p>
</div>
<div class="back"></div>
</div>
</div>
</body>
</html>源代碼中利用了CSS3的3D旋轉(zhuǎn)效果來實(shí)現(xiàn)相冊(cè)卡片的翻轉(zhuǎn)。通過為容器元素應(yīng)用perspective屬性，創(chuàng)建了一個(gè)3D視角，使得卡片能夠有立體感。同時(shí)，卡片會(huì)在鼠標(biāo)移入時(shí)翻轉(zhuǎn)180度，展示卡片背面的照片。
以上就是HTML3D立體相冊(cè)的源代碼，希望能夠幫助到大家。