如何制作一个3D相册（纯HTML和CSS）

 HTML

<div class="threeD">

        <a href="javascript:;"></a>

        <a href="javascript:;"></a>

        <a href="javascript:;"></a>

        <a href="javascript:;"></a>

        <a href="javascript:;"></a>

        <a href="javascript:;"></a>

</div>

CSS

.part3>.lunbo>.threeD {
    position: absolute;
    left: 0;
    width: 40%;
    height: 60%;
    bottom: 5%;
    right: 0;
    margin: 0 auto;
    transform-style: preserve-3d;
    /* 添加动画效果 */
    animation: rotate 30s linear infinite;
}

/* 添加关键帧 */
@keyframes rotate {
    0% {
        transform: rotateY(0);
    }

    100% {
        transform: rotateY(360deg);
    }
}

.threeD>a:nth-child(1) {
    background: url(/IMG/二/第三屏/pic_img01_321649e.png) no-repeat;
    background-size: contain;
    transform: rotateY(0deg) translateZ(600px);
}
.threeD>a:nth-child(2) {
    background: url(/IMG/二/第三屏/pic_img02_8a0ac30.png) no-repeat;
    background-size: contain;
    transform: rotateY(60deg) translateZ(600px);
}
.threeD>a:nth-child(3) {
    background: url(/IMG/二/第三屏/pic_img03_a3e61b9.png) no-repeat;
    background-size: contain;
    transform: rotateY(120deg) translateZ(600px);
}
.threeD>a:nth-child(4) {
    background: url(/IMG/二/第三屏/pic_img04_9a25a3a.png) no-repeat;
    background-size: contain;
    transform: rotateY(180deg) translateZ(600px);
}
.threeD>a:nth-child(5) {
    background: url(/IMG/二/第三屏/pic_img05_6dc5319.png) no-repeat;
    background-size: contain;
    transform: rotateY(240deg) translateZ(600px);
}
.threeD>a:nth-child(6) {
    background: url(/IMG/二/第三屏/pic_img06_6496dd6.png) no-repeat;
    background-size: contain;
    transform: rotateY(300deg) translateZ(600px);
}

预览效果：

QQ录屏20220829192100