3D相册复仇者联盟

Posted 2021-05-21 胸怀丶若谷

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了3D相册复仇者联盟相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            html{
                perspective: 800px;
            }
            
            
            .cube{
                width: 200px;
                height: 200px;
                background-color:#BBFFAA;
                margin: 100px auto;
                /* 设置3D变形效果 */
                transform-style: preserve-3d;
                /* transform: rotateX(45deg) rotateZ(45deg); */
                animation: rotate 20s infinite linear;
            }
            
            .cube > div{
                width: 200px;
                height: 200px;
                /* 为元素设置透明效果 */
                opacity: 0.7;
                position: absolute;
            }
            
            img{
                vertical-align: top;
            }
            
            /* 左面 */
            .box1{
                transform: rotateY(90deg) translateZ(100px);
            }
            
            /* 右面 */
            .box2{
                transform: rotateY(-90deg) translateZ(100px);
            }
            
            /* 上面 */
            .box3{
                transform: rotateX(90deg) translateZ(100px);
            }
            
            /* 下面 */
            .box4{
                transform: rotateX(-90deg) translateZ(100px);
            }
            
            /* 前面 */
            .box5{
                transform: rotateY(180deg) translateZ(100px);
            }
            
            /* 后面 */
            .box6{
                transform: rotateY(0deg) translateZ(100px);
            }
            
            @keyframes rotate{
                from{
                    transform: rotateX(0) rotateZ(0);
                }
                to{
                    
                    transform: rotateX(1turn) rotateZ(1turn);
                }
            }
        </style>
    </head>
    <body>
        <!-- 创建一个外部容器 -->
        <div class="cube">
            <div class="box1">
                <img src="./img/14/1.jpg">
            </div>
            
            <div class="box2">
                <img src="./img/14/2.jpg">
            </div>
            
            <div class="box3">
                <img src="./img/14/3.jpg">
            </div>
            
            <div class="box4">
                <img src="./img/14/4.jpg">
            </div>
            
            <div class="box5">
                <img src="./img/14/5.jpg">
            </div>
            
            <div class="box6">
                <img src="./img/14/6.jpg">
            </div>
        </div>
    </body>
</html>