3D立方体翻转动画-优快云博客

本文链接：https://blog.youkuaiyun.com/arrisking/article/details/104292626
<!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>
        * {
            margin: 0;
            top: 0;
        }
        
        .container {
            width: 300px;
            height: 300px;
            margin: 150px auto;
            /* border: 1px solid #000; */
            perspective: 200000;
        }
        
        .box {
            width: 300px;
            height: 300px;
            /* 控制子元素保持3D转换 */
            transform-style: preserve-3d;
            /* 测试代码 */
            /* transform: rotateX(45deg) rotateY(45deg); */
            animation: ro 4s linear infinite;
        }
        
        @keyframes ro {
            0% {
                transform: rotateX(0deg) rotateY(0deg);
            }
            100% {
                transform: rotateX(360deg) rotateY(360deg);
            }
        }
        
        .box-page {
            width: 300px;
            height: 300px;
            /* 位置初始化 */
            position: absolute;
            font-size: 100px;
            text-align: center;
            line-height: 300px;
            transform-style: preserve-3d;
        }
        
        .top {
            /* background-color: blue; */
            transform: translateZ(150px);
        }
        
        .bottom {
            /* background-color: orange; */
            transform: translateZ(-150px) rotateX(180deg);
        }
        
        .left {
            /* background-color: rgb(47, 196, 255); */
            transform: translateX(-150px) rotateY(-90deg);
        }
        
        .right {
            /* background-color: red; */
            transform: translateX(150px) rotateY(90deg);
        }
        
        .before {
            /* background-color: lawngreen; */
            transform: translateY(150px) rotateX(-90deg);
        }
        
        .after {
            /* background-color: gray; */
            transform: translateY(-150px) rotateX(90deg);
        }
        
        @keyframes a1 {
            0% {
                transform: translateZ(0px) scale(1) rotateZ(0deg);
            }
            20% {
                transform: translateZ(300px) scale(0) rotateZ(720deg);
            }
            90% {
                transform: translateZ(300px) scale(0) rotateZ(720deg);
            }
            100% {
                transform: translateZ(0px) scale(1) rotateZ(0deg);
            }
        }
        
        .box-page div:nth-child(1) {
            animation: a1 6s ease-in 0.5s;
        }
        
        .box-page div:nth-child(2) {
            animation: a1 6s ease-in 1s;
        }
        
        .box-page div:nth-child(3) {
            animation: a1 6s ease-in 1.5s;
        }
        
        .box-page div:nth-child(4) {
            animation: a1 6s ease-in 2s;
        }
        
        .box-page div:nth-child(5) {
            animation: a1 6s ease-in 2.5s;
        }
        
        .box-page div:nth-child(6) {
            animation: a1 6s ease-in 3s;
        }
        
        .box-page div:nth-child(7) {
            animation: a1 6s ease-in 3.5s;
        }
        
        .box-page div:nth-child(8) {
            animation: a1 6s ease-in 4s;
        }
        
        .box-page div:nth-child(9) {
            animation: a1 6s ease-in 4.5s;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="box">
            <div class="top box-page">1</div>
            <div class="bottom box-page">2</div>
            <div class="left box-page">3</div>
            <div class="right box-page">4</div>
            <div class="before box-page">5</div>
            <div class="after box-page">6</div>
        </div>
    </div>
    <script>
        var arr = document.querySelectorAll(".box-page")
            // 遍历六个面的每一个面
        for (var n = 0; n < 6; n++) {
            // 外层循环遍历行
            for (var i = 0; i < 3; i++) {
                // 内层循环遍历列
                for (var j = 0; j < 3; j++) {
                    var divs = document.createElement("div");
                    divs.style.cssText = "width:100px;height:100px;background-color:red;border:2px solid #fff;position: absolute;box-sizing:border-box;background-image:url(image/a" + n + ".JPG);background-size:300 px 300 px";
                    arr[n].appendChild(divs);
                    divs.style.left = j * 100 + "px";
                    divs.style.top = i * 100 + "px";

                    divs.style.backgroundPositionX = -j * 100 + "px";
                    divs.style.backgroundPositionY = -i * 100 + "px";
                }
            }

        }
    </script>
</body>

</html>
爱情魔方
