实现（可跟着一步一步实现）：
1. 定义标签（video是背景视频，.but1与.but2是左右两个按钮，main与.haha是底层盒子，.box就是旋转的8张图）：
<video src="video/3.mp4" autoplay loop muted></video> <main id="main"> <div class="but1"></div> <div class="but2"></div> <div class="haha"> <div class="box" style="--d: 0;"> <img src="img/1.jpg"> </div> <div class="box" style="--d: 1;"> <img src="img/25.jpg"> </div> <div class="box" style="--d: 2;"> <img src="img/3.jpg"> </div> <div class="box" style="--d: 3;"> <img src="img/52.jpg"> </div> <div class="box" style="--d: 4;"> <img src="img/6.jpg"> </div> <div class="box" style="--d: 5;"> <img src="img/snow.jpg"> </div> <div class="box" style="--d: 6;"> <img src="img/8.jpg"> </div> <div class="box" style="--d: 7;"> <img src="img/sea.jpg"> </div> </div> </main>
2. 定义底层盒子基本样式：
main{ position: relative; width: 220px; height: 130px; perspective: 800px; } .haha{ position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: all 1s; }
3. 定义按钮基本样式：
.but1,.but2{ position: absolute; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; font-size: 30px; color: white; opacity: 0.8; line-height: 50px; text-align: center; border-radius: 50%; cursor: pointer; user-select: none; } .but2{ left: -320px; } .but1{ right: -320px; }
4. 经过与点击按钮样式变化：
.but1:hover,.but2:hover{ box-shadow: inset 0 0 5px rgb(18, 208, 221); opacity: 1; } .but1:active,.but2:active{ /* background-color: rgb(22, 163, 81); */ box-shadow: inset 0 0 5px rgb(18, 208, 221), inset 0 0 10px rgb(18, 208, 221), inset 0 0 15px rgb(18, 208, 221); }
5. 图片的基本样式：
.box{ position: absolute; width: 100%; height: 100%; transform: rotateY(calc(var(--d) * 45deg)) translateZ(295px); } .box img{ width: 100%; height: 100%; }
6. js部分：
var haha = document.querySelector(".haha"); var but1 = document.querySelector(".but1"); var but2 = document.querySelector(".but2"); /* 旋转角度 */ var zhuan = 0; /* 设置轮播定时器 */ var lunbo = setInterval(fn,3000); but1.addEventListener('click',function(){ zhuan = zhuan - 45; haha.style.cssText = ` transform: rotateY(${zhuan}deg); `; }) but2.addEventListener('click',fn); function fn(){ zhuan = zhuan + 45; haha.style.cssText = ` transform: rotateY(${zhuan}deg); `; } but1.addEventListener('mouseover',function(){ clearInterval(lunbo); }); but1.addEventListener('mouseout',function(){ lunbo = setInterval(fn,3000); }); but2.addEventListener('mouseover',function(){ clearInterval(lunbo); }); but2.addEventListener('mouseout',function(){ lunbo = setInterval(fn,3000); }); haha.addEventListener('mouseover',function(){ clearInterval(lunbo); }); haha.addEventListener('mouseout',function(){ lunbo = setInterval(fn,3000); });
7.在你的页面使用该页面
<div> <iframe src="3d照片栏.html" frameborder="0" scrolling="no" width="1600" height="400" ></iframe> </div>
完整代码：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> @font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?wr5es'); src: url('fonts/icomoon.eot?wr5es#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?wr5es') format('truetype'), url('fonts/icomoon.woff?wr5es') format('woff'), url('fonts/icomoon.svg?wr5es#icomoon') format('svg'); font-weight: normal; font-style: normal; font-display: block; } *{ font-family: 'icomoon'; margin: 0; padding: 0; box-sizing: border-box; } video{ position: fixed; width: 100%; height: 100%; z-index: -10; object-fit: cover; } body{ height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #87CEFA; } main{ position: relative; width: 220px; height: 130px; perspective: 800px; } .haha{ position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: all 1s; } .but1,.but2{ position: absolute; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; font-size: 30px; color: white; opacity: 0.8; line-height: 50px; text-align: center; border-radius: 50%; cursor: pointer; user-select: none; } .but2{ left: -320px; } .but1{ right: -320px; } .but1:hover,.but2:hover{ box-shadow: inset 0 0 5px rgb(18, 208, 221); opacity: 1; } .but1:active,.but2:active{ /* background-color: rgb(22, 163, 81); */ box-shadow: inset 0 0 5px rgb(18, 208, 221), inset 0 0 10px rgb(18, 208, 221), inset 0 0 15px rgb(18, 208, 221); } .box{ position: absolute; width: 100%; height: 100%; transform: rotateY(calc(var(--d) * 45deg)) translateZ(295px); } .box img{ width: 100%; height: 100%; } </style> </head> <body> <video src="video/3.mp4" autoplay loop muted></video> <main id="main"> <div class="but1"></div> <div class="but2"></div> <div class="haha"> <div class="box" style="--d: 0;"> <img src="image/yeyu1.jpg"> </div> <div class="box" style="--d: 1;"> <img src="image/yeyu2.jpg"> </div> <div class="box" style="--d: 2;"> <img src="image/yeyu3.jpg"> </div> <div class="box" style="--d: 3;"> <img src="image/yeyu4.jpg"> </div> <div class="box" style="--d: 4;"> <img src="image/yeyu6.jpg"> </div> <div class="box" style="--d: 5;"> <img src="image/yeyu7.jpg"> </div> <div class="box" style="--d: 6;"> <img src="image/yeyu8.jpg"> </div> <div class="box" style="--d: 7;"> <img src="image/yeyu9.jpg"> </div> </div> </main> <script> var haha = document.querySelector(".haha"); var but1 = document.querySelector(".but1"); var but2 = document.querySelector(".but2"); /* 旋转角度 */ var zhuan = 0; /* 设置轮播定时器 */ var lunbo = setInterval(fn,3000); but1.addEventListener('click',function(){ zhuan = zhuan - 45; haha.style.cssText = ` transform: rotateY(${zhuan}deg); `; }) but1.addEventListener('mouseover',function(){ clearInterval(lunbo); }); but1.addEventListener('mouseout',function(){ lunbo = setInterval(fn,3000); }); but2.addEventListener('click',fn); but2.addEventListener('mouseover',function(){ clearInterval(lunbo); }); but2.addEventListener('mouseout',function(){ lunbo = setInterval(fn,3000); }); function fn(){ zhuan = zhuan + 45; haha.style.cssText = ` transform: rotateY(${zhuan}deg); `; } haha.addEventListener('mouseover',function(){ clearInterval(lunbo); }); haha.addEventListener('mouseout',function(){ lunbo = setInterval(fn,3000); }); </script> </body> </html>
