创建HTML结构

我们创建一个父容器，里面保存正方体六个面

<div class="mBox">
        <div class="top"></div>
        <div class="bottom"></div>
        <div class="left"></div>
        <div class="right"></div>
        <div class="before"></div>
        <div class="after"></div>
</div>

创建CSS样式

.mBox {
            width: 200px;
            height: 200px;
            margin: 50px auto;
            top: 100px;
            transform-style: preserve-3d; /*开启3D*/
            position: relative;
            transform: rotateY(-45deg) rotateX(-45deg);
            animation: move 100s linear infinite;/*添加的观测动画效果*/
        }
div {
            width: 200px;
            height: 200px;
            position: absolute;
            opacity: .8;
}

设置每个面的样式

        .top{
            background-color: rgb(18, 196, 136);
            transform: translateZ(100px);
        
        }
        .bottom{
            background-color: rgb(70, 147, 209);
            transform: translateZ(-100px);
        }
        .left{
            background-color: rgb(189, 79, 112);
            transform: translateX(-100px) rotateY(90deg);
        }
        .right{
            background-color: rgb(59, 212, 59);
            transform: translateX(100px) rotateY(90deg);
        }
        .before{
            background-color: rgb(158, 136, 64);
            transform: translateY(100px) rotateX(90deg);
        }
        .after{
            background-color: rgb(9, 82, 57);
            transform: translateY(-100px) rotateX(90deg);
        }

我们为正方体添加一个动画效果，观测一下

@keyframes move {
            0%{
                transform: rotateY(-45deg) rotateX(45deg);
            }
            100%{
                transform: rotateY(10000deg) rotateX(5000deg);
            }
        }

最后效果如下

旋转正方体