如何用CSS3转换、动画制作旋转相册，立方体相册

青旅半醒 2022-12-28 14:23 286阅读 0赞

# 一、3D转换制作旋转相册 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70][]

# 二、立方体![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70 1][] #

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            body {
                background-image: radial-gradient(907px at 3.4% 19.8%, rgb(255, 243, 122) 0%, rgb(255, 102, 145) 97.4%);
            }
            
            li {
                list-style: none;
            }
            
            .list {
                width: 200px;
                height: 200px;
                top: 50%;
                left: 50%;
                position: absolute;
                margin-top: -100px;
                margin-left: -100px;
                transform-style: preserve-3d;
                /* transition: all 2s; */
                animation: move 2s linear infinite;
                transform: rotateX(20deg);
            }
            
            .list-big {
                width: 600px;
                height: 600px;
                position: absolute;
                top: 50%;
                left: 50%;
                margin-left: -200px;
                margin-top: -200px;
                transform-style: preserve-3d;
                /* transition: all 2s; */
                animation: move 6s linear infinite;
                transform: rotateX(20deg);
                background-size: 600px;
            }
            
            .item {
                width: 200px;
                height: 200px;
                position: absolute;
                top: 0;
                left: 0;
                background-size: 200px;
                /* opacity: 0.8; */
            }
            
            .item:nth-child(1) {
                background: url("./img/hl1.jpg");
                transform: translateZ(100px);
            }
            
            .item:nth-child(2) {
                background: url("img/hl2.jpg");
                transform: translateZ(100px) rotateY(180deg);
            }
            
            .item:nth-child(3) {
                background: url("./img/hl3.jpg");
                transform: translateX(-100px) rotateY(-90deg);
            }
            
            .item:nth-child(4) {
                background: url("./img/hl4.jpg");
                transform: translateX(100px) rotateY(90deg);
            }
            
            .item:nth-child(5) {
                background: url("./img/hl5.jpg");
                transform: translateY(-100px) rotateX(90deg);
            }
            
            .item:nth-child(6) {
                background: url("./img/hl6.jpg");
                transform: translateY(100px) rotateX(-90deg);
            }
            /* } .item:nth-child(1) {
                background-image: url("./img/hl1.jpg") no-repeat;
            } */
            /*         
            .list:hover {
                transform: rotateX(20deg) rotateY(36000deg);
            } */
            
            @keyframes move {
                100% {
                    transform: rotateX(20deg) rotateY(360deg);
                }
            }
            
            @keyframes turn {
                to {
                    transform: translateZ(600px);
                }
            }
            
            @keyframes turn1 {
                to {
                    transform: translateZ(-600px) rotateY(180deg);
                }
            }
            
            @keyframes turn2 {
                to {
                    transform: translateX(-600px) rotateY(-90deg);
                }
            }
            
            @keyframes turn3 {
                to {
                    transform: translateX(600px) rotateY(90deg);
                }
            }
            
            @keyframes turn4 {
                to {
                    transform: translateY(-600px) rotateX(90deg);
                }
            }
            
            @keyframes turn5 {
                to {
                    transform: translateY(600px) rotateX(-90deg);
                }
            }
            
            .item-big {
                width: 600px;
                height: 600px;
                position: absolute;
                top: 0;
                left: 0;
                opacity: .8;
            }
            
            .item-big:nth-child(1) {
                animation: turn 2s linear infinite;
                background: url("./img/2.jpg");
                transform: translateZ(300px);
            }
            
            .item-big:nth-child(2) {
                animation: turn1 2s linear infinite;
                background: url("img/3.jpg");
                transform: translateZ(-300px) rotateY(180deg);
            }
            
            .item-big:nth-child(3) {
                animation: turn2 2s linear infinite;
                background: url("./img/4.jpg");
                transform: translateX(-300px) rotateY(-90deg);
            }
            
            .item-big:nth-child(4) {
                animation: turn3 2s linear infinite;
                background: url("./img/5.jpg");
                transform: translateX(300px) rotateY(90deg);
            }
            
            .item-big:nth-child(5) {
                animation: turn4 2s linear infinite;
                background: url("./img/6.jpg");
                transform: translateY(-300px) rotateX(90deg);
            }
            
            .item-big:nth-child(6) {
                animation: turn5 2s linear infinite;
                background: url("./img/m1.jpg");
                transform: translateY(300px) rotateX(-90deg);
            }
        </style>
    </head>
    
    <body>
        <ul class="list">
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
        </ul>
        <ul class="list-big">
            <li class="item-big"></li>
            <li class="item-big"></li>
            <li class="item-big"></li>
            <li class="item-big"></li>
            <li class="item-big"></li>
            <li class="item-big"></li>
        </ul>
    </body>
    
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70]: /images/20221120/9d32afd6164c46e0a4be48ab562264c2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70 1]: /images/20221120/42afb1d752354d9c892cb07d22bbc2b1.png