3D 图片切换焦点图

原创已于 2025-06-27 15:21:37 修改 · 269 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #前端

于 2025-05-01 15:21:01 首次发布

<!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>
body {
margin: 0;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #1a1a2e;
}

.slider {
position: relative;
width: 600px;
height: 400px;
perspective: 1000px;
}

.slides {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
animation: rotate 10s infinite linear;
}

.slide {
position: absolute;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
border-radius: 10px;
}

.slide:nth-child(1) {
background-image: url('https://picsum.photos/600/400?random=1');
transform: rotateY(0deg) translateZ(300px);
}

.slide:nth-child(2) {
background-image: url('https://picsum.photos/600/400?random=2');
transform: rotateY(90deg) translateZ(300px);
}

.slide:nth-child(3) {
background-image: url('https://picsum.photos/600/400?random=3');
transform: rotateY(180deg) translateZ(300px);
}

.slide:nth-child(4) {
background-image: url('https://picsum.photos/600/400?random=4');
transform: rotateY(270deg) translateZ(300px);
}

@keyframes rotate {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(360deg);
}
}

.link {
position: absolute;
bottom: 10px;
font-size: 14px;
color: #fff;
text-decoration: none;
}
</style>
</head>
<body>
<div class="slider">
<div class="slides">
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
</div>
</div>

</body>
</html>