* { 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; }
<>左右翻页+-添加删除