CSS实现简单的立方体

1.定义一个父盒子和六个子盒子

<div class="cube">
    <p>红一</p>
    <p>红二</p>
    <p>红三</p>
    <p>红四</p>
    <p>红五</p>
    <p>红六</p>
</div>

2.父盒子样式

.cube {
            position: relative;
            width: 200px;
            height: 200px;
            transform-style: preserve-3d;
        }

transform-style: preserve-3d;属性为必写属性,为父盒子开辟3D空间

3.子盒子样式

.cube p {
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
            text-align: center;
        }

子绝父相,让所有子盒子都叠在一起

4.分别为每一个子盒子设置空间旋转与位移使成为立方体的每一面

.cube p:nth-child(1) {
            background-color: rgba(229, 94, 70, 1);
            transform: rotateX(90deg) translateZ(100px);
        }
.cube p:nth-child(2) {
            background-color: rgba(229, 205, 70, 1);
            transform: rotateX(-90deg) translateZ(100px);
        }
.cube p:nth-child(3) {
            background-color: rgba(94, 229, 70, 1);
            transform: rotateX(180deg) translateZ(100px);
        }
.cube p:nth-child(4) {
            background-color: rgba(70, 160, 229, 1);
            transform: translateZ(100px);
        }
.cube p:nth-child(5) {
            background-color: rgba(22, 42, 142, 1);
            transform: rotateY(-90deg) translateZ(100px);
        }
.cube p:nth-child(6) {
            background-color: rgba(192, 70, 229, 1);
            transform: rotateY(90deg) translateZ(100px);
        }

注意旋转的方向,如果反方向旋转,子元素内容会变成镜像

最后给父盒子加上动画即可让立方体动起来

        .cube {
            position: relative;
            width: 200px;
            height: 200px;
            animation: cube 10s linear infinite alternate;
            transform-style: preserve-3d;
        }
        @keyframes cube {
            100% {
                transform: rotateX(360deg) rotateY(360deg);
            }
        }

最终效果图: