3D旋轉(zhuǎn)木馬相冊(cè)是一種很酷的方式來(lái)展示你的照片，HTML代碼也很簡(jiǎn)單。這里是一份基本的HTML代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3D旋轉(zhuǎn)木馬相冊(cè)</title>
<style>
/* 設(shè)置圖片大小和間隔 */
.carousel img {
width: 200px;
height: 150px;
margin-right: 20px;
}
/* 使木馬水平居中 */
.carousel {
margin: 0 auto;
width: 800px;
}
/* 設(shè)置木馬容器 */
.carousel ul {
position: relative;
perspective: 1000px;
height: 100%;
}
/* 設(shè)置木馬里面的每一個(gè)li元素 */
.carousel li {
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: transform 1s;
}
/* 讓木馬旋轉(zhuǎn) */
.carousel.rotate li {
transform: rotateY(calc(var(--i) * 60deg));
}
</style>
</head>
<body>
<div class="carousel">
<ul class="rotate">
<?php
// 在這里使用php或其他方式來(lái)動(dòng)態(tài)生成照片
for ($i=0; $i<6; $i++) {
echo '<li style="transform: rotateY('. ($i*60) .'deg)"><img src="photo'. $i .'.jpg"></li>';
}
?>
</ul>
</div>
<script>
// 計(jì)算木馬的Li數(shù)量
var numItems = document.querySelectorAll('.carousel li').length;
document.documentElement.style.setProperty('--num', numItems);
</script>
</body>
</html>這段代碼首先設(shè)置了圖片的大小和間隔，確保它們都能夠很好地列在木馬上。然后定義了一個(gè)class為carousel的div，用來(lái)包含木馬下面的ul元素。接下來(lái)，ul元素被設(shè)置為position: relative，并且使用perspective屬性為3D旋轉(zhuǎn)制定一個(gè)透視點(diǎn)。每個(gè)li元素都被設(shè)置為position: absolute，并且使用transform-style屬性設(shè)定木馬可以保留它的3D變換。 木馬的每個(gè)li元素都使用CSS transition property添加了一些過(guò)渡效果。最后，使用一個(gè)很簡(jiǎn)單的JavaScript計(jì)算木馬的Li數(shù)量并將其儲(chǔ)存在CSS變量中，這樣就可以動(dòng)態(tài)生成木馬了。