好几天没有更新了 今天分享个主要是Css3的动画 加了点js 完成的3d轮播图

1.div布局
< div class=“stage”
<> div id=“box” class =“box”>
< div 1 /div>
< div2/ div>
< div3 /div>
< div 4 /div>
< div5 / div>
< / div>
</ div>
< button id=“next”>下一张< /button>

2.CSS样式
.stage{
height: 500px;
border:2px solid black;
position: relative;
perspective: 1000px;
}
.box{
width: 500px;
height: 300px;
position: absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
transform-style: preserve-3d;
}
.box div{
width: 500px;
height: 300px;
line-height: 300px;
text-align: center;
background-color: blueviolet;
font-size:80px;
color:white;
position: absolute;
top:0;
left:0;
border:5px solid black;
transition: all .5s;
}
.box div:nth-child(1){
transform: translateX(-500px) translateZ(-200px) rotateY(-30deg);
}
.box div:nth-child(2){
transform: translateX(-250px) translateZ(-100px) rotateY(-15deg);
}
.box div:nth-child(3){
transform: translateZ(100px);
}
.box div:nth-child(4){
transform: translateX(250px) translateZ(-100px) rotateY(15deg);
}
.box div:nth-child(5){
transform: translateX(500px) translateZ(-200px) rotateY(30deg);
}
3.一点js

      var positions=[
    "translateX(-500px) translateZ(-200px)  rotateY(30deg)",
    "translateX(-250px) translateZ(-100px)  rotateY(15deg)",
    "translateZ(100px)",
    "translateX(250px) translateZ(-100px)  rotateY(-15deg)",
    "translateX(500px) translateZ(-200px)  rotateY(-30deg)"
    ]

var imgs=box.children;

next.onclick=function(){

    // 调整坑位顺序
    // positions.push(positions.shift());
    positions.unshift(positions.pop());
    
    for(var i=0;i<imgs.length;i++){
        imgs[i].style.transform=positions[i];
    }

}