一：前言
今天在完善我自己的个人网站时，要做一个3D轮播图，就是一个六边体，在六边体的每个面都放一张图片，但是每个边之间都会有一定的间距，效果如下：
点击两边的按钮会旋转切换图片，每隔4秒会自动切换。
在我初学的时候我觉得这个效果非常的有意思，很高大上，哈哈哈。今天我就把代码分享出来，以供大家使用。
二：属性讲解
要实现3D效果，我觉得需要了解一下这几个知识点。
1：tansform-style
取值：preserve-3d | flat
peserve-3d：开启3D空间，子元素可以在3D空间中进行变换
flat：关闭3D空间，子元素的变换沿着父元素的平面进行
2：transform
取值：matrix | matrix3d | translate | translate3d | rotate | rotate3d | scale | scale3d | skew | skewX | skewY
matrix：定义一个2D变换，使用六个值来表示矩阵变换
matrix3d：定义一个3D变换，使用16个值来表示矩阵变换
translate：定义一个2D的平移变换
translate3d：定义一个3D的平移变换
rotate：定义一个2D的旋转变换
rotate3d：定义一个3D的旋转变换
scale：定义一个2D的缩放变换
scale3d：定义一个3D的缩放变换
skew：定义一个2D的斜切变换
skewX：定义一个2D的x轴方向的斜切变换
skewY：定义一个2D的y轴方向的斜切变换
3：perspective
取值：length
length：指定观察者与元素之间的距离，单位可以是px、em、rem等
4：transform-origin
取值：x-axis y-axis z-axis
x-axis：定义元素变换的x轴方向基点，可以是长度值或百分比
y-axis：定义元素变换的y轴方向基点，可以是长度值或百分比
z-axis：定义元素变换的z轴方向基点，可以是长度值或百分比
三：代码
HTML
<div class="outside">
<div class="rotas">
<div class="sel">
<img src="./01.png">
<div></div>
</div>
<div>
<img src="./02.png">
<div></div>
</div>
<div>
<img src="./03.png">
<div></div>
</div>
<div>
<img src="./04.png">
<div></div>
</div>
<div>
<img src="./05.png">
<div></div>
</div>
<div>
<img src="./06.png">
<div></div>
</div>
</div>
<div class="changeBtns">
<div class="left"><</div>
<div class="right">></div>
</div>
</div>
CSS
* {
margin: 0;
padding: 0;
}
body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(28, 28, 28);
}
.outside {
width: 80%;
height: 85%;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.rotas {
width: 500px;
height: 340px;
transition: all .6s linear;
position: relative;
transform-style: preserve-3d;
transform: rotateX(-5deg) rotateY(2deg);
user-select: none;
}
.rotas>div {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 0 10px rgb(240, 240, 240);
transform: scale(1.1);
}
.rotas>div div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 5;
background-color: rgba(30, 30, 30, .65);
transition: all .6s linear;
}
.rotas>div.sel div {
background-color: rgba(30, 30, 30, 0);
}
.rotas>div:nth-of-type(1) {
transform: translateZ(500px);
}
.rotas>div:nth-of-type(2) {
transform: rotateY(-60deg) translateZ(500px);
}
.rotas>div:nth-of-type(3) {
transform: rotateY(-120deg) translateZ(500px);
}
.rotas>div:nth-of-type(4) {
transform: translateZ(-500px);
}
.rotas>div:nth-of-type(5) {
transform: rotateY(120deg) translateZ(500px);
}
.rotas>div:nth-of-type(6) {
transform: rotateY(60deg) translateZ(500px);
}
.rotas img {
width: 100%;
height: 100%;
}
.changeBtns {
width: 100%;
height: 80px;
display: flex;
justify-content: space-between;
align-items: center;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}
.changeBtns>div {
font-size: 20px;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
color: rgb(170, 170, 170);
border: solid 1px;
cursor: pointer;
user-select: none;
}
Javascript
let rotas = $('.rotas');
let rotasPro = $('.rotas >div');
let rightBtn = $('.right');
let leftBtn = $('.left');
let deg = 0;
let degImg = 0;
// 定义函数
const changeRotas = (obj,n) => {
if(n > 0) {
deg++;
} else {
deg--;
}
obj.css('transform','rotateX(-5deg) rotateY(' + (deg*60+2) + 'deg)');
}
const changeImgs=(n)=> {
if(n > 0) {
if(++degImg >= 6) {
degImg = 0;
}
} else {
if(--degImg < 0) {
degImg = 5;
}
}
rotasPro.removeClass('sel');
$(rotasPro[degImg]).addClass('sel');
}
rightBtn.click(function() {
changeRotas(rotas,1);
changeImgs(1);
});
leftBtn.click(function() {
changeRotas(rotas,-1);
changeImgs(-1);
});
let autoRota = setInterval(function() {
changeRotas(rotas,-1);
changeImgs(-1);
}, 4000);
HTML中的图片可以换成自己的图片。
四：结语
做的不是很好，不过可以用，有空的大佬帮我指出问题我感激不尽！最后感谢大家看完，希望各位能给在下一个赞！谢谢！！！