第一步:我们首先要通过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