3D相冊制作越來越受歡迎，除了有視覺效果好之外，還可以增加用戶的互動性，讓用戶更加沉浸在相冊中。而3D相冊制作源代碼HTML包也成為了廣大設計師和開發者們的首選。下面我們來介紹一下3D相冊制作源代碼HTML包的相關信息：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的相冊</title>
<style>
/*定義容器樣式*/
.wrap {
width: 600px;
height: 350px;
margin: 50px auto;
perspective: 1000px; /*3D效果所需屬性*/
}
/*定義相冊樣式*/
.album {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d; /*實現3D效果所需屬性*/
transition: 1s; /*過渡動畫效果*/
}
/*定義相冊中的照片樣式*/
.album img {
width : 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
backface-visibility: hidden; /*隱藏背面，讓照片可以正反顯示*/
}
/*定義左右翻頁按鈕樣式*/
.btn {
position: absolute;
top: 50%;
margin-top: -30px;
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.4);
color: #fff;
cursor: pointer;
}
/*定義左按鈕樣式*/
.btn-left {
left: 20px;
}
/*定義右按鈕樣式*/
.btn-right {
right: 20px;
}
/*定義翻頁動態樣式*/
.rotate {
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="wrap">
<div class="album">
/*定義相冊中的照片內容*/
<img src="photo1.jpg">
<img src="photo2.jpg">
<img src="photo3.jpg">
</div>
/*定義左右翻頁按鈕*/
<div class="btn btn-left"><i class="fa fa-chevron-left"></i></div>
<div class="btn btn-right"><i class="fa fa-chevron-right"></i></div>
</div>
<script>
var album = document.querySelector('.album');
var preBtn = document.querySelector('.btn-left');
var nextBtn = document.querySelector('.btn-right');
var deg = 0; //照片初始角度
/*相冊翻頁函數*/
function rotateAlbum(degValue) {
deg += degValue;
album.style.transform = 'rotateY('+ deg +'deg)';
}
/*左翻頁按鈕事件*/
preBtn.addEventListener('click', function(){
rotateAlbum(60);
album.classList.add('rotate');
});
/*右翻頁按鈕事件*/
nextBtn.addEventListener('click', function(){
rotateAlbum(-60);
album.classList.add('rotate');
});
/*過渡動畫結束后刪除動態類*/
album.addEventListener('transitionend', function(){
album.classList.remove('rotate');
});
</script>
</body>
</html>以上就是3D相冊制作源代碼HTML包的相關內容，你可以通過自己在HTML模板中進行修改和調整，來實現自己所需要的相冊效果。祝您制作愉快！