*{margin:0;padding:0;box-sizing:border-box}body{display:flex;align-items:center;justify-content:center;height:100vh;background-color:#222;transform-style:preserve-3d}.box{position:relative;display:flex;transform-style:preserve-3d;perspective:500px}.box .item{position:absolute;top:calc(50% - 150px);left:calc(50% - 150px);width:200px;height:300px;background-color:#fff;transition:.5s;box-shadow:0 0 50px rgba(0,0,0,.5);transform-style:preserve-3d;user-select:none;transform-origin:bottom;-webkit-box-reflect:below 1px linear-gradient(transparent, rgba(0, 0, 0, 0.5))}.box .item:nth-child(1){transform:translate3d(-250px, 0, 0) scale(0.8) rotateY(25deg);z-index:1}.box .item:nth-child(2){transform:translate3d(-250px, 0, 0) scale(0.8) rotateY(25deg);z-index:2}.box .item:nth-child(3){transform:translate3d(-150px, 0, 0) scale(0.9) rotateY(15deg);z-index:3}.box .item:nth-child(4){transform:translate3d(0, 0, 0) scale(1) rotateY(0);z-index:4}.box .item:nth-child(5){transform:translate3d(150px, 0, 0) scale(0.9) rotateY(-15deg);z-index:3}.box .item:nth-child(6){transform:translate3d(250px, 0, 0) scale(0.8) rotateY(-25deg);z-index:3}.box .item:nth-child(7){transform:translate3d(250px, 0, 0) scale(0.8) rotateY(-25deg);z-index:-1}.box .item img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}.btns{position:absolute;bottom:7.5rem;display:flex;gap:20px}.btns button{position:relative;width:50px;height:50px;border:2px solid #fff;background-color:rgba(0,0,0,0);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:.5;transition:.3s}.btns button:hover{opacity:1}.btns button:before{content:"";position:absolute;left:20PX;width:10px;height:10px;border-top:2px solid #fff;border-left:2px solid #fff;rotate:-45deg}.btns button:last-child::before{left:initial;right:20px;rotate:135deg}/*# sourceMappingURL=main.min.css.map */