图像分层效果

html：

       

       

           

           

           

           

       

css：

body{

    margin: 0;

    padding: 0;

    width: 100%;

    height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

}

.container{

    position: relative;

    width: 360px;

    height: 640px;

    background: rgba(0,0,0,.1);

    transform: rotate(-30deg) skew(30deg) scale(.8);

    transition: 0.5s;

}

.container img{

    position: absolute;

    width: 100%;

    height: 100%;

    transition: 0.5s;

}

.container:hover img:nth-child(4){

    transform: translate(100px,-100px);

    opacity: 1;

}

.container:hover img:nth-child(3){

    transform: translate(80px,-80px);

    opacity: .8;

}

.container:hover img:nth-child(2){

    transform: translate(60px,-60px);

    opacity: .6;

}

.container:hover img:nth-child(1){

    transform: translate(40px,-40px);

    opacity: .4;

}