3D相册示例

        width: 90px;
        display: block;
        margin: 10px 5px;
    }

    .img1 {
        /*background-color: red;*/
        transform: translateZ(0px);
        animation: zhuan1 4s linear forwards;
    }

    @keyframes zhuan1 {
        14.28% {
            transform: translateX(-212.1px) translateZ(212.1px) rotateY(-45deg);
        }
        28.56% {
            transform: translateX(-300px) translateZ(0px) rotateY(-90deg);
        }
        42.84% {
            transform: translateX(-212.1px) translateZ(-212.1px) rotateY(-135deg);
        }
        57.12% {
            transform: translateX(0px) translateZ(-300px) rotateY(-180deg);
        }
        71.40% {
            transform: translateX(212.1px) translateZ(-212.1px) rotateY(-225deg);
        }
        85.68% {
            transform: translateX(300px) translateZ(0px) rotateY(-270deg);
        }
        100% {
            transform: translateX(212.1px) translateZ(212.1px) rotateY(-315deg);
        }
    }

    .img2 {
        /*background-color: black;*/
        transform: translateZ(-10px);
        animation: zhuan2 3.5s linear .5s forwards;
    }

    @keyframes zhuan2 {
        16.6% {
            transform: translateX(-212.1px) translateZ(212.1px) rotateY(-45deg);
        }
        33.2% {
            transform: translateX(-300px) translateZ(0px) rotateY(-90deg);
        }
        49.8% {
            transform: translateX(-212.1px) translateZ(-212.1px) rotateY(-135deg);
        }
        66.4% {
            transform: translateX(0px) translateZ(-300px) rotateY(-180deg);
        }
        83% {
            transform: translateX(212.1px) translateZ(-212.1px) rotateY(-225deg);
        }
        100% {
            transform: translateX(300px) translateZ(0px) rotateY(-270deg);
        }
    }

    .img3 {
        /*background-color: khaki;*/
        transform: translateZ(-20px);
        animation: zhuan3 3s linear 1s forwards;
    }

    @keyframes zhuan3 {
        20% {
            transform: translateX(-212.1px) translateZ(212.1px) rotateY(-45deg);
        }
        40% {
            transform: translateX(-300px) translateZ(0px) rotateY(-90deg);
        }
        60% {
            transform: translateX(-212.1px) translateZ(-212.1px) rotateY(-135deg);
        }
        80% {
            transform: translateX(0px) translateZ(-300px) rotateY(-180deg);
        }
        100% {
            transform: translateX(212.1px) translateZ(-212.1px) rotateY(-225deg);
        }
    }

    .img4 {
        /*background-color: violet;*/
        transform: translateZ(-30px);
        animation: zhuan4 2.5s linear 1.5s forwards;
    }

    @keyframes zhuan4 {
        25% {
            transform: translateX(-212.1px) translateZ(212.1px) rotateY(-45deg);
        }
        50% {
            transform: translateX(-300px) translateZ(0px) rotateY(-90deg);
        }
        75% {
            transform: translateX(-212.1px) translateZ(-212.1px) rotateY(-135deg);
        }
        100% {
            transform: translateX(0px) translateZ(-300px) rotateY(-180deg);
        }
    }

    .img5 {
        /*background-color: aqua;*/
        transform: translateZ(-40px);
        animation: zhuan5 2s linear 2s forwards;
    }

    @keyframes zhuan5 {
        33.3% {
            transform: translateX(-212.1px) translateZ(212.1px) rotateY(-45deg);
        }
        66.6% {
            transform: translateX(-300px) translateZ(0px) rotateY(-90deg);
        }
        100% {
            transform: translateX(-212.1px) translateZ(-212.1px) rotateY(-135deg);
        }
    }

    .img6 {
        /*background-color: saddlebrown;*/
        transform: translateZ(-50px);
        animation: zhuan6 1.5s linear 2.5s forwards;
    }

    @keyframes zhuan6 {
        50% {
            transform: translateX(-212.1px) translateZ(212.1px) rotateY(-45deg);
        }
        100% {
            transform: translateX(-300px) translateZ(0px) rotateY(-90deg);
        }
    }

    .img7 {
        /*background-color: darkblue;*/
        transform: translateZ(-60px);
        animation: zhuan7 1s linear 3s forwards;
    }

    @keyframes zhuan7 {
        100% {
            transform: translateX(-212.1px) translateZ(212.1px) rotateY(-45deg);
        }
    }

    .img8 {
        /*background-color: hotpink;*/
        transform: translateZ(-70px);
        animation: zhuan8 .5s linear 3.5s forwards;
    }

    @keyframes zhuan8 {
        100% {
            transform: translateZ(300px);
        }
    }
</style>

        <div class="img img6">
            <img src="https://cdn.jsdelivr.net/gh/latin-xiao-mao/img/blog-content/3D相册示例/6.jpg"/>
        </div>
        <div class="img img7">
            <img src="https://cdn.jsdelivr.net/gh/latin-xiao-mao/img/blog-content/3D相册示例/7.jpg"/>
        </div>
        <div class="img img8">
            <img src="https://cdn.jsdelivr.net/gh/latin-xiao-mao/img/blog-content/3D相册示例/8.jpg"/>
        </div>
        <div class="img img9">
            <img src="https://cdn.jsdelivr.net/gh/latin-xiao-mao/img/blog-content/3D相册示例/9.jpg"/>
        </div>
    </div>
</div>

```