*,
*::after,
*::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #eeeeee;
}

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

}

.box {
    position: relative;
    width: 400px;
    height: 200px;
    
    transform: perspective(500px) rotate(-45deg) skew(25deg);
    box-shadow: -90px 75px 20px rgba(0, 0, 0, .3);
    background: #fff url(./image/5.png);
    background-repeat: no-repeat;
    background-position: 34px;
    background-size: 340px;
    transition: .5s;
}

.box:hover {

    transform: perspective(500px) rotate(-45deg) skew(25deg) translate(50px,-50px);
    box-shadow: -150px 115px 100px rgba(0, 0, 0, .3);
}



.box::before {

    content: '';
    width: 90px;
    height: 100%;
    position: absolute;
    top:0;
    left: 0;
    
    transform: perspective(500px) translate(-90px, 35px) skewY(-38deg);
    /* box-shadow: -90px 75px 20px rgba(0, 0, 0, .3); */
    background: #ffffffe8 url(./image/7.png);
    background-repeat: no-repeat;
    background-position: 25px;
    background-size: 50px;
}

.box::after {

    content: '';
    width: 100%;
    height: 35%;
    position: absolute;
    top:0;
    left: 0;
    
        transform: perspective(500px) translate(-45px,200px) skewX(-52deg);
    background: #ffffffe8 url(./image/9.png);
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 100px;
}

.box2 {
    
    left: 100%;
   
}
.box3 {
    
    left: -100%;
   
}
.box4 {
    
    left: -0%;
   
}
.box5 {
    
    left: -200%;
   
}
.box6 {
    
    left: -120%;
   
}
.box7 {
        
    top:-400px;
    left: 120%;
   
}
.box8 {
    
    top: -1000px;
    left: 215%;
   
}

.box9 {
    
    top: -350px;
    left: 20%;
   
}