* {
    padding: 0;
    margin: 0;
    transition: all 0.3s ease-in-out;
}

body {
    background-image: url('../imgaegs/zhujian.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 700px;
}

ul {
    position: absolute;
    transition: 1s;
    transform-style: preserve-3d;
    perspective: 900px;
    list-style: none;
    width: 340px;
    height: 440px;
}

li {
    transform-origin: left;
    position: absolute;
    will-change: transform; 
}

li img {
    width: 440px;
    height: 540px;
    box-shadow: 1px 4px 5px rgba(0, 0, 0, 0.2);
}

li:nth-of-type(1) {
    transform: rotateY(-22deg);
    transition: 0.8s;
}

li:nth-of-type(2) {
    transform: rotateY(-18deg);
    transition: 0.8s;
}

li:nth-of-type(3) {
    transform: rotateY(-14deg);
    transition: 0.8s;
}

li:nth-of-type(4) {
    transform: rotateY(-10deg);
    transition: 0.8s;
}

li:nth-of-type(5) {
    transform: rotateY(-6deg);
    transition: 0.8s;
}

li:nth-of-type(6) {
    transform: rotateY(-2deg);
    transition: 0.8s;
}

li:nth-of-type(7) {
    transform: rotateY(2deg);
    transition: 0.8s;
}