3D立体墙照片 - 技术栈

handlebars 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
        }
        
        * {
            box-sizing: border-box;
        }
        
        body {
            background-color: #2f3542;
        }
        
        main {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }
        
        .cube {
            width: 250px;
            height: 250px;
            transform-style: preserve-3d;
            animation: rotate-cobe 10s ease-in-out infinite;
        }
        
        .cube>div {
            width: 250px;
            height: 250px;
            background-size: cover;
            background-position: center center;
            opacity: 0.8;
            position: absolute;
            box-shadow: inset 0 0 4px 2px rgba(106, 106, 106, 0.4);
        }
        /* 前 */
        
        .cube .img1 {
            background-image: url("https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00323-3881.jpg");
            transform: translateZ(125px);
        }
        /* 右 */
        
        .cube .img2 {
            background-image: url("https://img0.baidu.com/it/u=3607416692,1659289502&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=750");
            transform: rotateY(90deg) translateZ(125px);
        }
        /* 左 */
        
        .cube .img3 {
            background-image: url("https://img2.baidu.com/it/u=667685406,1155663261&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500");
            transform: rotateY(-90deg) translateZ(125px);
        }
        /* 下 */
        
        .cube .img4 {
            background-image: url("https://img2.baidu.com/it/u=1547725493,4110294476&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500");
            transform: rotateX(90deg) translateZ(125px);
        }
        /* 上 */
        
        .cube .img5 {
            background-image: url("https://img1.baidu.com/it/u=2345344959,2598464592&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=313");
            transform: rotateX(-90deg) translateZ(125px);
        }
        /* 后 */
        
        .cube .img6 {
            background-image: url("https://img1.baidu.com/it/u=475796613,1666623793&fm=253&fmt=auto&app=120&f=JPEG?w=1140&h=641");
            transform: rotateY(180deg) translateZ(125px);
        }
        
        @keyframes rotate-cobe {
            0% {
                transform: rotateX(0deg) rotateY(0deg);
            }
            20% {
                /* 右边图片 */
                transform: rotateY(-90deg);
            }
            40% {
                /* 上 */
                transform: rotateX(-90deg);
            }
            60% {
                /* 左 */
                transform: rotateY(90deg);
            }
            80% {
                /* 下 */
                transform: rotate(90deg);
            }
            100% {
                transform: rotateX(0deg) rotateY(0deg);
            }
        }
    </style>
</head>

<body>
    <main>
        <div class="cube">
            <div class="img1"></div>
            <div class="img2"></div>
            <div class="img3"></div>
            <div class="img4"></div>
            <div class="img5"></div>
            <div class="img6"></div>
        </div>
    </main>
</body>

</html>