3D立体旋转相册

原创已于 2025-06-27 13:25:59 修改 · 551 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-06-07 15:20:25 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D立体旋转相册</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Arial', sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #111;
overflow: hidden;
perspective: 1000px;
}

.container {
position: relative;
width: 100%;
max-width: 1200px;
text-align: center;
margin: 0 auto;
padding: 20px;
}

h1 {
color: #fff;
margin-bottom: 50px;
text-shadow: 0 0 10px rgba(255,255,255,0.5);
}

.photo-album {
position: relative;
width: 300px;
height: 200px;
margin: 0 auto;
transform-style: preserve-3d;
animation: rotate 20s infinite linear;
}

.photo-album:hover {
animation-play-state: paused;
}

.photo {
position: absolute;
width: 100%;
height: 100%;
border-radius: 5px;
overflow: hidden;
box-shadow: 0 0 20px rgba(255,255,255,0.3);
transition: all 0.5s ease;
}

.photo:hover {
transform: scale(1.1);
box-shadow: 0 0 30px rgba(255,255,255,0.6);
z-index: 10;
}

.photo img {
width: 100%;
height: 100%;
object-fit: cover;
}

.photo:nth-child(1) {
transform: rotateY(0deg) translateZ(400px);
background: #ff7675;
}

.photo:nth-child(2) {
transform: rotateY(40deg) translateZ(400px);
background: #74b9ff;
}

.photo:nth-child(3) {
transform: rotateY(80deg) translateZ(400px);
background: #55efc4;
}

.photo:nth-child(4) {
transform: rotateY(120deg) translateZ(400px);
background: #a29bfe;
}

.photo:nth-child(5) {
transform: rotateY(160deg) translateZ(400px);
background: #ffeaa7;
}

.photo:nth-child(6) {
transform: rotateY(200deg) translateZ(400px);
background: #fd79a8;
}

.photo:nth-child(7) {
transform: rotateY(240deg) translateZ(400px);
background: #81ecec;
}

.photo:nth-child(8) {
transform: rotateY(280deg) translateZ(400px);
background: #fab1a0;
}

.photo:nth-child(9) {
transform: rotateY(320deg) translateZ(400px);
background: #636e72;
}

@keyframes rotate {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(360deg);
}
}

.controls {
margin-top: 50px;
display: flex;
justify-content: center;
gap: 20px;
}

.control-btn {
padding: 10px 20px;
background: rgba(255,255,255,0.2);
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s;
}

.control-btn:hover {
background: rgba(255,255,255,0.4);
transform: translateY(-3px);
}

.footer {
margin-top: 80px;
color: rgba(255,255,255,0.7);
font-size: 0.9rem;
}

.footer a {
color: white;
text-decoration: none;
font-weight: bold;
}

.footer a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="container">
<h1>3D立体旋转相册</h1>

<div class="photo-album">

<div class="photo">
<img src="https://source.unsplash.com/random/600x400?nature1" alt="自然风景1">
</div>


<div class="photo">
<img src="https://source.unsplash.com/random/600x400?nature2" alt="自然风景2">
</div>


<div class="photo">
<img src="https://source.unsplash.com/random/600x400?nature3" alt="自然风景3">
</div>


<div class="photo">
<img src="https://source.unsplash.com/random/600x400?city1" alt="城市风光1">
</div>


<div class="photo">
<img src="https://source.unsplash.com/random/600x400?city2" alt="城市风光2">
</div>


<div class="photo">
<img src="https://source.unsplash.com/random/600x400?animal1" alt="动物世界1">
</div>


<div class="photo">
<img src="https://source.unsplash.com/random/600x400?animal2" alt="动物世界2">
</div>


<div class="photo">
<img src="https://source.unsplash.com/random/600x400?people1" alt="人物肖像1">
</div>


<div class="photo">
<img src="https://source.unsplash.com/random/600x400?people2" alt="人物肖像2">
</div>
</div>

<div class="controls">
<button class="control-btn" onclick="document.querySelector('.photo-album').style.animationPlayState='paused'">暂停</button>
<button class="control-btn" onclick="document.querySelector('.photo-album').style.animationPlayState='running'">播放</button>
<button class="control-btn" onclick="document.querySelector('.photo-album').style.animationDuration='10s'">加速</button>
<button class="control-btn" onclick="document.querySelector('.photo-album').style.animationDuration='30s'">减速</button>
</div>

<div class="footer">

</div>
</div>
</body>
</html>