css动画-旋转魔方

最新推荐文章于 2026-05-19 07:34:22 发布

原创最新推荐文章于 2026-05-19 07:34:22 发布 · 515 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css #前端

如何用css动画实现以下效果呢？

基础布局：

原理：由上、下、左、右、前、后这几个面组成分别旋转到相应的位置
父元素要开启3d空间

基础代码：

 <div class="container">
        <div class="cube">
            <!-- 红色 -->
            <div class="cube_side side_front">
                <div class="cube_side_square"></div>
                <div class="cube_side_square"></div>
                <div class="cube_side_square"></div>
                <div class="cube_side_square"></div>
                <div class="cube_side_square"></div>
                <div class="cube_side_square"></div>
                <div class="cube_side_square"></div>
                <div class="cube_side_square"></div>
                <div class="cube_side_square"></div>
            </div>
            <!-- 白色 -->
            <div class="cube_side side_back">
                <div class="cube_side_square"></div>
                <div class="cube_side_square"></div>
                <div class="cube_side_square"></div>
                <div class="cube_side_square"></div>
                <div class="cube_side_square"></div>
                <div class="cube_side_square"></div>
                <div class="cube_side_square"></div>
                <div class="cube_side_square"></div>
                <div class="cube_side_square"></div>
            </div>
            <!-- 蓝色 -->
            <div class="cube_side side_right">
                <div class="cube_side_square"></div>
                <div class="cube_side_square"></div>
                <div class="cube_side_square"></div>
                <div class="cube_side_square"></div>
                <div class="cube_side_square"></div>
                <div class="cube_side_square"></div>
                <div class="cube_side_square"></div>
                <div class="cube_side_square"></div>
                <div class="cube_side_square"></div>
            </div>
            <!-- 黄色 -->
            <div class="cube_side side_left">
                <div class="cube_side_square"></div>
                <div class="cube_side_square"></div>
                <div class="cube_side_square"></div>
                <div class="cube_side_square"></div>
                <div class="cube_side_square"></div>
                <div class="cube_side_square"></div>
                <div class="cube_side_square"></div>
                <div class="cube_side_square"></div>
                <div class="cube_side_square"></div>
            </div>
            <!-- 红色 -->
            <div class="cube_side side_top">
                <div class="cube_side_square"></div>
                <div class="cube_side_square"></div>
                <div class="cube_side_square"></div>
                <div class="cube_side_square"></div>
                <div class="cube_side_square"></div>
                <div class="cube_side_square"></div>
                <div class="cube_side_square"></div>
                <div class="cube_side_square"></div>
                <div class="cube_side_square"></div>
            </div>
            <!-- 绿色 -->
            <div class="cube_side side_bottom">
                <div class="cube_side_square"></div>
                <div class="cube_side_square"></div>
                <div class="cube_side_square"></div>
                <div class="cube_side_square"></div>
                <div class="cube_side_square"></div>
                <div class="cube_side_square"></div>
                <div class="cube_side_square"></div>
                <div class="cube_side_square"></div>
                <div class="cube_side_square"></div>
            </div>
        </div>
    </div>

思路：

这里我们可以看到最外层有个container盒子我们设置他的宽高为200px 并且让他的景深为700
之后cube盒子中设置背景色为黑色，宽高继承父级，开启3d空间，并添加animation动画效果
cube盒子中设置六个盒子每个盒子
在六个盒子里设置九个小盒子（给相应的九个小盒子设置颜色）

   .container {
            margin: 200px 200px;
            width: 200px;
            height: 200px;
            perspective: 700px;
        }

        .cube {
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            transition: transform 1s ease;
            background: black;
            /* 添加动画效果*/
            animation: Cube 10s linear infinite both alternate; 
        }

        @keyframes Cube {
            0% {
                transform: rotateZ(0deg) rotateX(0deg) rotateY(0deg);
            }

            15% {
                transform: rotateZ(45deg) rotateX(45deg) rotateY(45deg);
            }

            30% {
                transform: rotateZ(45deg) rotateX(90deg) rotateY(90deg);
            }

            45% {
                transform: rotateZ(45deg) rotateX(135deg) rotateY(135deg);
            }

            60% {
                transform: rotateZ(45deg) rotateX(90deg) rotateY(180deg);
            }

            75% {
                transform: rotateZ(45deg) rotateX(45deg) rotateY(225deg);
            }

            100% {
                transform: rotateZ(45deg) rotateX(0deg) rotateY(270deg);
            }
        } 

        .cube_side {
            width: 100%;
            height: 100%;
            font-size: 0;
            position: absolute;
            backface-visibility: hidden;
            background: black;
            border-radius: 7px;
            box-sizing: border-box;
        }

        .side_front {
            transform: translateZ(100px);
        }

          .cube_side:nth-of-type(1) .cube_side_square {
            background: #b71234;
        }

        .cube_side .cube_side_square {
            display: inline-block;
            border: 6px solid;
            width: 27%;
            height: 27%;
            border-radius: 12px;
        }

        .side_back {
            transform: rotateX(-180deg) translateZ(100px);
        }

        .cube_side:nth-of-type(2) .cube_side_square {
            background: #cecece;
        }

        .side_right {
            transform: rotateY(90deg) translateZ(100px);
        }

        .cube_side:nth-of-type(3) .cube_side_square {
            background: #0046ad;
        }

        .side_left {
            transform: rotateY(-90deg) translateZ(100px);
        }

        .cube_side:nth-of-type(4) .cube_side_square {
            background: #ffd500;
        }

        .side_top {
            transform: rotateX(90deg) translateZ(100px);
        }

        .cube_side:nth-of-type(5) .cube_side_square {
            background: #ff5800;
        }

        .side_bottom {
            transform: rotateX(-90deg) translateZ(100px);
        }

        .cube_side:nth-of-type(6) .cube_side_square {
            background: #009b48;
        }

思路已经告诉大家啦！快来尝试一下吧！