实现(可跟着一步一步实现):
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>