HTML旋轉相冊是一種以3D效果呈現的圖片展示方式，它讓網頁變得更加生動、富有創意。在HTML中，通過使用旋轉、縮放等效果來實現這種相冊的展示效果，并且這個相冊具有優美的動態感。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML3D旋轉相冊</title>
<style>
/*圖片旋轉效果的樣式*/
.container {
perspective: 500px;
/*透視效果*/
}
.item {
background-color: rgba(255, 255, 255, 0.8);
width: 300px;
height: 200px;
position: absolute;
transform-origin: 50% 50% -150px;
/*元素旋轉的基準點*/
transition: all 1s ease;
/*動態效果*/
}
.item:hover {
transform: scale(1.2) rotateY(180deg);
/*圖片實現旋轉和縮放操作*/
}
/*布局樣式*/
.row {
margin-left: 20px;
margin-right: 20px;
}
.clear {
clear: both;
}
.item img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="item">
<img src="img1.jpg">
</div>
<div class="item">
<img src="img2.jpg">
</div>
<div class="item">
<img src="img3.jpg">
</div>
<div class="clear"></div>
</div>
</div>
</body>
</html>上述代碼實現了一個簡單的HTML3D旋轉相冊，其中item類用于設置圖片的樣式和動畫效果，row類和clear類則用于實現圖片的等高布局和清除浮動的效果。
下一篇css列表變成橫向