【立方体】

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>

       *{
            padding: 0;
            margin: 0;
        }
        body{
            perspective: 1000px;

        }
        ul{
            width: 200px;
            height: 200px;
            /* border:  1px solid black; */
            margin: 100px auto;
            position: relative;
            transform-style: preserve-3d;
            /* transform: rotate3d(1,1,0,30deg); */
            animation: rotate 20s linear infinite;
            
        }
        @keyframes rotate{
            0%{
                transform: rotateX(0deg) rotateY(0deg);
            }
            50%{
                transform: rotateX(-10deg) rotateY(-360deg);
            }
            60%{
                transform: rotateX(-10deg) rotateY(-340deg);
            }
            100%{
                transform: rotateX(-360deg) rotateY(-340deg);
            }
        }
        li{
            width: 200px;
            height: 200px;
            line-height: 200px;
            text-align: center;
            position: absolute;
            list-style: none;
        }
        li:nth-of-type(1){
            background-color: rgba(240, 104, 104, 0.7);
            transform: translateZ(100px);

        }
        li:nth-of-type(2){
            background-color: rgba(181, 216, 27, 0.7);
            transform: translateZ(-100px);
        }
        li:nth-of-type(3){
            background-color: rgba(27, 216, 99, 0.7);
            transform: rotateY(-90deg) translateZ(100px);
        }
        li:nth-of-type(4){
            background-color: rgba(27, 109, 216, 0.7);
            transform: rotateY(90deg) translateZ(100px);
        }
        li:nth-of-type(5){
            background-color: rgba(216, 27, 128, 0.7);
            transform: rotateX(90deg) translateZ(100px);
        }
        li:nth-of-type(6){
            background-color: rgba(187, 52, 214, 0.7);
            transform: rotateX(-90deg) translateZ(100px);
        }