.solid {
    position: relative;
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    margin: 30px auto;
  }
  .solid .side {
    transform: rotateY(90deg) translateZ(100px) rotateX(35.27deg);
    position: absolute;
    left: 0;
    bottom: 50%;
    height: 173.2px;
    width: 200px;
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2aWV3Qm94PSIwIDAgMzM2LjkyIDI5MS43NSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cG9seWdvbiBwb2ludHM9IjMzNC43NSAyOTAuNSAyLjE3IDI5MC41IDE2OC40NyAyLjUgMzM0Ljc1IDI5MC41IiBmaWxsPSJyZ2JhKDM3LDExNiwxODcsMC44KSIgc3Ryb2tlPSIjY2NjIiBzdHJva2Utd2lkdGg9IjEuMCIgdHJhbnNmb3JtPSJtYXRyaXgoMSwgMCwgMCwgMSwgNy4xMDU0MjczNTc2MDEwMDJlLTE1LCAzLjU1MjcxMzY3ODgwMDUwMWUtMTUpIi8+Cjwvc3ZnPg==");
    transform-origin: 50% 100%;
  }
  .solid .side:nth-child(1) {
    transform: rotateY(90deg) translateZ(100px) rotateX(35.27deg);
    border-bottom-color: rgba(57, 104, 176, 0.4);
  }
  .solid .side:nth-child(2) {
    transform: rotateY(180deg) translateZ(100px) rotateX(35.27deg);
    border-bottom-color: rgba(153, 2, 232, 0.4);
  }
  .solid .side:nth-child(3) {
    transform: rotateY(270deg) translateZ(100px) rotateX(35.27deg);
    border-bottom-color: rgba(6, 224, 239, 0.4);
  }
  .solid .side:nth-child(4) {
    transform: rotateY(360deg) translateZ(100px) rotateX(35.27deg);
    border-bottom-color: rgba(198, 98, 114, 0.4);
  }
  .solid .side:nth-child(5) {
    transform: rotateY(450deg) translateZ(100px) rotateX(144.73deg);
    border-bottom-color: rgba(253, 80, 200, 0.4);
  }
  .solid .side:nth-child(6) {
    transform: rotateY(540deg) translateZ(100px) rotateX(144.73deg);
    border-bottom-color: rgba(240, 149, 8, 0.4);
  }
  .solid .side:nth-child(7) {
    transform: rotateY(630deg) translateZ(100px) rotateX(144.73deg);
    border-bottom-color: rgba(191, 102, 236, 0.4);
  }
  .solid .side:nth-child(8) {
    transform: rotateY(720deg) translateZ(100px) rotateX(144.73deg);
    border-bottom-color: rgba(149, 250, 15, 0.4);
  }
  
  @-webkit-keyframes spin {
    0% {
      transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
    100% {
      transform: rotateX(360deg) rotateY(720deg) rotateZ(1080deg);
    }
  }
  
  @keyframes spin {
    0% {
      transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
    100% {
      transform: rotateX(360deg) rotateY(720deg) rotateZ(1080deg);
    }
  }

  
  /* 
  .solid {
    position: relative;
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
  }
  .solid .side {
    position: absolute;
    left: 0;
    bottom: 50%;
    border-bottom: 173.2px solid black;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    transform-origin: 50% 100%;

  }
  .solid span {
    position: absolute;
  }
  .solid .side:nth-child(1) {
    transform: rotateY(90deg) translateZ(100px) rotateX(35.27deg);
    border-bottom-color: rgba(187, 37, 107, 1);
    
  }
  .solid .side:nth-child(2) {
    transform: rotateY(180deg) translateZ(100px) rotateX(35.27deg);
    border-bottom-color: rgba(34, 58, 83, 0.7);
  }
  .solid .side:nth-child(3) {
    transform: rotateY(270deg) translateZ(100px) rotateX(35.27deg);
    border-bottom-color: rgba(37, 116, 187, 0.7);
  }
  .solid .side:nth-child(4) {
    transform: rotateY(360deg) translateZ(100px) rotateX(35.27deg);
  border-bottom-color: rgba(34, 58, 83, 0.7);
  }
  .solid .side:nth-child(5) {
    transform: rotateY(450deg) translateZ(100px) rotateX(144.73deg);
    border-bottom-color: rgba(37, 116, 187, 0.7);
  } 
  .solid .side:nth-child(6) {
    transform: rotateY(540deg) translateZ(100px) rotateX(144.73deg);
    border-bottom-color: rgba(37, 116, 187, 0.7);
  }
  .solid .side:nth-child(7) {
    transform: rotateY(630deg) translateZ(100px) rotateX(144.73deg);
    border-bottom-color: rgba(37, 116, 187, 0.7);
  }
  .solid .side:nth-child(8) {
    transform: rotateY(720deg) translateZ(100px) rotateX(144.73deg);
    border-bottom-color: rgba(34, 58, 83, 0.7);
  }
  
  @-webkit-keyframes spin {
    0% {
      transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
    100% {
      transform: rotateX(360deg) rotateY(720deg) rotateZ(1080deg);
    }
  }
  
  @keyframes spin {
    0% {
      transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
    100% {
      transform: rotateX(360deg) rotateY(720deg) rotateZ(1080deg);
    }
  } */