3D環(huán)繞相冊是一種非常吸引人的展示圖片的方式，通過一組HTML和CSS代碼就可以讓你的網(wǎng)站呈現(xiàn)出炫酷的3D相冊效果。下面是一個3D環(huán)繞相冊的HTML代碼：
<!DOCTYPE html>
<html>
<head>
<title>3D相冊</title>
<style>
body {
background-color: #333;
}
.carousel {
width: 400px;
height: 300px;
perspective: 1000px;
margin: 50px auto;
}
.carousel figure {
display: block;
position: relative;
transform-style: preserve-3d;
width: 300px;
height: 200px;
margin: 50px auto;
padding: 0;
text-align: center;
font-size: 24px;
line-height: 200px;
color: black;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
transition: transform 1s;
}
.carousel figure:hover {
transform: rotateY(180deg);
}
.carousel figure img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="carousel">
<figure>
<img src="img1.jpg" alt="Image1">
<figcaption>Image1</figcaption>
</figure>
<figure>
<img src="img2.jpg" alt="Image2">
<figcaption>Image2</figcaption>
</figure>
<figure>
<img src="img3.jpg" alt="Image3">
<figcaption>Image3</figcaption>
</figure>
<figure>
<img src="img4.jpg" alt="Image4">
<figcaption>Image4</figcaption>
</figure>
</div>
</body>
</html>在這個代碼中，我們給相冊容器定義了一個透視視圖（perspective），這樣它的子元素就可以使用3D變換效果了。每個figure元素代表一張圖片和對應(yīng)的說明文字。我們在figure元素上使用了transform-style: preserve-3d來保持其子元素在3D空間內(nèi)保持位置，同時給它們加上了box-shadow和border-radius來增加它們的層次感。當(dāng)鼠標(biāo)移上去時，我們使用:hover偽類來旋轉(zhuǎn)figure元素180度，從而顯示反面，這里包括展示的圖片和說明文字。這個代碼簡單易懂，用處很大，尤其適用于展示圖片等內(nèi)容的場景。