3D旋轉相冊是一種非常炫酷的效果，在網頁上展示照片的時候非常實用。現在，借助HTML5，我們可以用很簡單的代碼來實現這種效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>3D旋轉相冊</title>
<style>
.album {
width: 500px;
height: 500px;
perspective: 1000px;
perspective-origin: 50% 50%;
margin: 50px auto;
position: relative;
}
.photos {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: transform 1s;
transform-origin: 50% 50%;
}
.photo {
position: absolute;
top: 0;
left: 0;
width: 80%;
height: 80%;
margin: 10%;
background-size: cover;
background-position: center center;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
transform-style: preserve-3d;
}
.photo.back {
transform: rotateY(180deg) translateZ(-1px);
}
.photo.animate {
animation: rotateX 1s linear forwards;
}
.album:hover .photos {
transform: rotateY(360deg);
}
@keyframes rotateX {
0% {
transform: rotateX(0deg);
}
100% {
transform: rotateX(180deg);
}
}
</style>
</head>
<body>
<div class="album">
<div class="photos">
<div class="photo"></div>
<div class="photo back"></div>
</div>
</div>
<script>
var photos = document.getElementsByClassName("photo");
var photosLength = photos.length;
for (var i = 0; i <= photosLength - 1; i++) {
var photo = photos[i];
photo.style.backgroundImage = "url('photo/0" + (i + 1) + ".jpg')";
photo.addEventListener("mouseover", function() {
this.classList.add("animate");
});
photo.addEventListener("animationend", function() {
this.classList.remove("animate");
this.classList.toggle("back");
});
}
</script>
</body>
</html>這段代碼實現了一組兩張相片的3D旋轉相冊。通過HTML和CSS的樣式控制，我們可以讓相冊的內容呈現出三維的效果。相片的翻轉也是通過CSS中的transform屬性實現的。
在JavaScript部分，我們通過addEventListener監聽了鼠標懸停事件，并添加了相應的CSS類來觸發動畫效果。其中，animationend事件監聽了動畫結束時的事件，并在此時更改了相片的class，回到原始狀態，以便后續可以再次觸發動畫。
總之，通過這段簡單的代碼，你可以輕松地實現一組非常炫酷的3D旋轉相冊，讓你的網頁展示照片的時候更加生動有趣。