* {
margin:0;
padding:0;
font-size:50px;
cursor:pointer;
transition:all 4s;
}
.container {
display:flex;
width:100vw;
min-height:100vh;
justify-content:center;
align-items:center;
-webkit-perspective:1500px;
perspective:1500px;
flex-flow:column;
}
.photos {
width:800px;
height:580px;
background-color:#F5DEB3;
border-radius:10px;
box-shadow:3px 3px 3px rgba(255,20,90,0.7);
transform-style:preserve-3d;
z-index:0;
}
.photos div {
z-index:999;
transform-origin:right;
position:absolute;
width:380px;
height:540px;
margin-left:20px;
margin-top:20px;
background-color:black;
border-radius:10px 0 0 10px;
}
.img img {
width:375px;
height:530px;
margin-left:5px;
margin-top:5px;
background-color:rgba(255,255,255,0.5);
}
.tools {
display:flex;
margin:5px;
width:800px;
height:50px;
justify-content:space-around;
}
.tools>div {
width:50px;
height:50px;
text-align:center;
line-height:50px;
border:solid 1px gray;
border-radius:25px;
box-shadow:3px 3px 3px gray;
position:relative;
}
.add .f {
opacity:0;
position:absolute;
margin:0;
width:50px;
height:50px;
border-radius:25px;
left:0;
}
<>左右翻页+-添加删除