立方体

css3部分

           * {
                margin: 0;
                padding: 0;
                /* 该属性重设盒模型为IE6之前的盒模型（IE浏览器唯一可取之处，不接受反驳） */
                box-sizing: border-box;
            }
            ul, ol {
                list-style: none;
            }
            div {
                width: 800px;
                height: 800px;
                margin: 100px auto;
                position: relative;
                perspective: 400px;
            }
            @keyframes move { /* 设置动画关键帧 */
                0% {
                    transform: rotateX(0deg);
                }
                25% {
                    transform: rotateX(180deg);
                }
                50% {
                    transform: rotateX(360deg) rotateY(0deg);
                }
                75% {
                    transform: rotateX(360deg) rotateY(180deg);
                }
                100% {
                    transform: rotateX(360deg) rotateY(360deg);
                }
            }
            .square {
                width: 200px;
                height: 200px;
                position: absolute;
                left: 50%;
                top: 50%;
                margin: -100px 0 0 -100px;
                transform-style: preserve-3d;
                animation: move 6s linear infinite;
            }
            .square li {
                width: 100%;
                height: 100%;
                border-radius: 30px;
                position: absolute;
                font-size: 100px;
                color: #fff;
                opacity: .5;
                text-align: center;
                line-height: 200px;
                /* 设置该属性为hidden时隐藏元素背面 */
                /* backface-visibility: hidden; */
            }
            .square li:nth-child(1) {
                background: red;
                transform: translateZ(100px);
            }
            .square li:nth-child(2) {
                background: rebeccapurple;
                transform: rotateX(-90deg) translateZ(100px);
            }
            .square li:nth-child(3) {
                background: royalblue;
                transform: rotateX(-180deg) translateZ(100px);
            }
            .square li:nth-child(4) {
                background: rosybrown;
                transform: rotateX(90deg) translateZ(100px);
            }
            .square li:nth-child(5) {
                background: brown;
                transform: rotateY(-90deg) translateZ(100px);
            }
            .square li:nth-child(6) {
                background: hotpink;
                transform: rotateY(90deg) translateZ(100px);
            }

html

        <div>
            <ul class="square">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
            </ul>
        </div>

---

image.png