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>

所用图片：