CSS，JS实现3D切割轮播图

第一步：我们首先要通过CSS来完成一个基本布局，利用 transform-style: preserve-3d设置成3D。
下面是CSS部分的代码

* {
   
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
li {
   
    list-style: none;
}
/* 轮播图 */
.homePage {
   
    width: 800px;
    height: 200px;
    margin: 150px auto;
    background-color: pink;
    position: relative;
    /* overflow: hidden; */
}

.homePage>ul {
   
    width: 100%;
    height: 100%;
}

.homePage>ul>li {
   
    width: 200px;
    height: 100%;
    float: left;
    transform-style: preserve-3d;
    position: relative;
    transition: all 1s;
}

.homePage>ul>li>span {
   
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.homePage>ul>li>span:nth-child(1) {
   
    background-image: url(../images/bxqy.jpg);
    transform: translateZ