3Dcube

.square-wrap {
    width: 100px;
    height: 100px;
    margin: 0 auto;
}

.square-wrap div {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 50px;
}
/*立体实现*/

.square-wrap {
    margin-top: 20px;
    transform-style: preserve-3d;
    animation: square-animation 5s infinite;
}
/*动画实现*/
@keyframes square-animation {
    0% {
        transform: rotateX(0deg) rotateY(0deg);
    }
    45% {
        transform: rotateX(90deg)
    }
    75% {
        transform: rotateY(90deg);
    }
    90% {
        transform: rotateX(45deg) rotateY(45deg);
    }
    100% {
        transform: rotateX(0deg) rotateY(0deg);
    }
}

.square-wrap .top {
    background-color: red;
    transform: translateY(-50px) rotateX(90deg);
}

.square-wrap .bottom {
    background-color: brown;
    transform: translateY(50px) rotateX(-90deg);
}

.square-wrap .left {
    background-color: green;
    transform: translateX(-50px) rotateY(90deg);
}

.square-wrap .right {
    background-color: blue;
    transform: translateX(50px) rotateY(-90deg);
}

.square-wrap .front {
    background-color: #ddd;
    transform: translateZ(50px);
}

.square-wrap .behind {
    background-color: #000000;
    transform: translateZ(-50px);
}