旋转的正四面体

刚学前端没多久,菜新一枚.

跟教程学了CSS正方体的构建,便试着构建正四面体,为了演示,便添加了动画.因为有部分角度,长度转换用的是约数,所以正四面体面与面的接连并不完美.如果有人知道怎么给取值设置带根号的数值,求解惑.谢谢.

演示链接

代码:

HTML

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

CSS

        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: #000;
        }
        ul{
            list-style: none;
            width: 200px;
            height: 173px;
            margin: 200px auto;
            font-size: 100px;
            text-align: center;
            line-height: 210px;
            transform-style: preserve-3d;
            transform: rotateX(0deg) rotateY(0deg);
            animation: abc 10s linear infinite;
        }
        ul li{
            width: 200px;
            height: 173px;
            position: absolute;
            clip-path: polygon(100px 0,200px 173px,0 173px);
            transform-origin: center bottom;
        }
        ul li:nth-child(1){
            background-color: red;
            transform: rotateY(120deg) translateZ(57px) rotateX(19.2deg);
        }
        ul li:nth-child(2){
            background-color: green;
            transform: rotateY(240deg) translateZ(57px) rotateX(19.2deg);
        }
        ul li:nth-child(3){
            background-color: blue;
            transform: rotateY(0deg) translateZ(57px) rotateX(19.2deg);
        }
        ul li:nth-child(4){
            background-color: yellow;
            transform: rotateY(0deg) translateZ(57px) rotateX(90deg);
        }
        @keyframes abc {
            0%{
                transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
            }
            100%{
                transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
            }
        }

如有纰漏,敬请指正.若有更好的方法,诚请分享.谢谢.