Tetrahedron

HTML

<div class='container'>
  <div class='thing'>
    <div class='triangle'>
      <div>
        <div></div>
      </div>
    </div>
    <div class='triangle'>
      <div>
        <div></div>
      </div>
    </div>
    <div class='triangle'>
      <div>
        <div></div>
      </div>
    </div>

  </div>
</div>

SCSS

@keyframes ani {
             
 
             to { 
                transform: rotate(360deg);
             }
         }

.container {
    background : #bbb;
    width : 90%;
    height : 1000px;
    
    
    
    perspective :2000px;
    perspective-origin : 150px 100px;
    

    .thing {
        transform-style : preserve-3d;
        top : 300px;
        left : 300px;
        position : relative;
        width : 100px;
        height : 100px;
        transform : rotate(0);
        animation: ani 4s linear infinite;
        
        
 

        .triangle {
        
            @for $i from 1 through 9 {
                
                &:nth-child($i) {
                    //  judging by eye
                    transform :   rotateY($i * 120deg)  translateZ(28.867px) rotateX(90 - 70.53deg) ;    
                   
                }
                
            }
            
            transform-origin : center 86.60254px;
            //background : red;
            position : absolute;
            left : 0;
            top : 0;
            width : 100%;
            height : 100%; 
            transform : rotate(180deg);

            & > div {
                height : 100%;
               // background : blue;
                transform-origin : left top;
                transform : translateX(50%) rotate(30deg);
                position : relative;
                overflow : hidden;
                & > div {
                    height : 100%;
                    //background : yellow;
                    position : relative;
                    border-right : solid 1px black;
                    transform-origin : left top;
                    transform : rotate(-60deg) translateX(-100%)  ;
                    overflow : hidden;
                    &:before {
                        content  :'';
                        display : block;
                        height : 100%;
                        border : solid 1px black;
                        background...