【炫酷旋转相册----使用html书写。附全部源代码】
以下是一个简单的HTML页面示例，用于创建一个炫酷的旋转相册。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>炫酷旋转相册</title>
<style>
.gallery-container {
position: relative;
width: 300px;
height: 300px;
margin: 50px auto;
perspective: 1000px;
}
.gallery-item {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
transition: transform 1s;
}
.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
.gallery-item.show {
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="gallery-container">
<div class="gallery-item">
<img src="image1.jpg" alt="Image 1">
</div>
<div class="gallery-item">
<img src="image2.jpg" alt="Image 2">
</div>
</div>
<script>
const galleryItems = document.querySelectorAll('.gallery-item');
const toggleButton = document.createElement('button');
toggleButton.textContent = '点击翻转相册';
document.body.appendChild(toggleButton);
toggleButton.addEventListener('click', () => {
galleryItems.forEach(item => item.classList.toggle('show'));
});
</script>
</body>
</html>这段代码包含了一个简单的旋转相册，当用户点击按钮时，相册翻转显示另一张图片。CSS中的perspective和transform属性用于创建3D效果，JavaScript用于在用户交互时切换图片显示。这个示例假设您已经有了两张名为image1.jpg和image2.jpg的图片。
评论已关闭