I. Introduction
Today when I was improving my personal website, I wanted to make a 3D carousel, which is a hexagon. There is a picture on each side of the hexagon, but there are There is a certain spacing, and the effect is as follows: 
Clicking the buttons on both sides will rotate and switch pictures, and it will automatically switch every 4 seconds.
When I first learned it, I thought this effect was very interesting and very impressive, hahaha. Today I will share the code for everyone to use.
2: Attribute explanation
To achieve 3D effects, I think we need to understand these knowledge points.
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轴方向基点，可以是长度值或百分比
Three: Code
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);
Images in HTML can be replaced with your own images.
Four: Conclusion
It's not very well done, but it works. I'd be very grateful to anyone who has time to help me point out the problem! Finally, thank you all for reading, and I hope you can give it a like next time! Thanks! ! !