<div class="solid">
  <div class="side"></div>
  <div class="side"></div>
  <div class="side"></div>
  <div class="side"></div>
  <div class="side"></div>
  <div class="side"></div>
  <div class="side"></div>
  <div class="side"></div>
</div>
$triwidth: 100px;
$sqrt3: 1.732;
$tilt: 35.27deg; // atan(1/sqrt(2))
$triheight: $triwidth * $sqrt3;

html {
  height: 100%;
}
body {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.solid {
  position: relative;
  width: #{$triwidth * 2};
  height: #{$triwidth * 2};
  animation: spin 16s infinite linear;
  transform-style: preserve-3d;

  .side {
    position: absolute;
    left: 0;
    bottom: 50%;
//  width: 0;
    border-bottom: $triheight solid black;
    border-left: $triwidth solid transparent;
    border-right: $triwidth solid transparent;
    transform-origin: 50% 100%;
  }

  @for $i from 1 through 8 {
    $tilt2: $tilt;
    @if $i > 4 {
      $tilt2: 180deg - $tilt;
    }
    .side:nth-child(#{$i}) {
      transform: 
        rotateY(#{$i * 90deg}) 
        translateZ($triwidth) 
        rotateX($tilt2);
      border-bottom-color: #{rgba(random(255),random(255),random(255),0.4)};
    }
  }

}


@keyframes spin {
  0% { 
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
  100% { 
    transform: rotateX(360deg) rotateY(720deg) rotateZ(1080deg);
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.