CSS 利用3D写一个魔方模型

css可以模拟3d效果，需要配合透视使用，利用一些平面通过平移和旋转可以得到我们想要的3d效果。不过在平面的基础上需要添加立体呈现。

1. 构建html骨架

魔方一共有6个面
魔方6个面需要大盒子包裹，方便立体呈现和透视

  <body>
            <div class="box">
                <div class="space1"></div>
                <div class="space2"></div>
                <div class="space3"></div>
                <div class="space4"></div>
                <div class="space5"></div>
                <div class="space6"></div>
            </div>
        </body>

2. 给大盒子和6个面添加背景颜色、大小等样式

代码将之后需要的动画等效果都写上了
有些代码是调试用的

.box {
            width: 490px;
            height: 490px;
            margin: 150px auto;
            background: pink;
            transform-origin: center center -245px;
            /* 开启上帝视角 调试用 */
            /* transform: rotateY(60deg) rotateZ(30deg); */
            /* 立体呈现 */
            transform-style: preserve-3d;
            /* 调用动画 */
            animation: test 5s infinite linear;
        }
        /* 使用属性选择器：选中类名以space的类 */
        [class^='space'] {
            position: absolute;
            width: 490px;
            height: 490px;
            background: #000;
            padding-left: 10px;
            padding-top: 10px;
        }

3. 给6个面分别给三阶魔方的格子并配上颜色

html：

代码与上面的会有一些层叠

 <div class="box">
        <div class="space1">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>

        <div class="space2">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>

        <div class="space3">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>

        <div class="space4">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>

        <div class="space5">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>

        <div class="space6">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>

css:

.box li {
            float: left;
            width: 150px;
            height: 150px;
            border-radius: 10px;
            background: blue;
            margin-right: 10px;
            margin-bottom: 10px;
        }

        .space2 li {
            background: #fff;
        }

        .space3 li {
            background: yellow;
        }

        .space4 li {
            background: green;
        }

        .space5 li {
            background: orange;
        }

        .space6 li {
            background: red;
        }

4. 利用偏移和旋转对6个面进行位置调整

调整之前开启“上帝视角”，方便观察 transform: rotateY(60deg) rotateZ(30deg)
6个面的父元素也就是box开启立体呈现，不然没有效果 transform-style: preserve-3d;
为了更加真实，需要在box的父元素上添加透视

body {
    background: #f7f7f8;
    padding: 12px 12px 79px;
}

偏移的时候要理性分析，调整方案不限 代码：

.space2 {
            transform: translateZ(-490px);
        }

        .space3 {
            transform: translateZ(-245px) translateX(245px) rotateY(90deg);
        }

        .space4 {
            transform: translateZ(-245px) translateX(-245px) rotateY(90deg);
        }

        .space5 {
            transform: translateZ(-245px) translateY(245px) rotateX(90deg);
        }

        .space6 {
            transform: translateZ(-245px) translateY(-245px) rotateX(90deg);
        }

5. 添加动画效果

定义动画

  /* 定义动画 */
        @keyframes test {
            from {
                transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
            }

            to {
                transform: rotateX(360deg) rotateY(360deg);
            }
        }

        .box:hover {
            animation-play-state: paused;
        }

使用动画（代码上面写过）

.box {
        /* 调用动画 */
       animation: test 5s infinite linear;
 }

最后效果：

代码写完后魔方在旋转，可以根据自己的偏好调整角度，代码在动画部分
写旋转原点的时候非常关键，写不好回出现很诡异的效果
存在的不足欢迎指出评论！