$parts: 6; 
$slices: $parts*4; 
$radius: 140px;
$circ: 2*$radius*pi();
$size: $circ/$slices;
$height: $size;
$bgh: $size*$parts*2;
$bgw: $circ;

$dur: 6s;

@keyframes rotate {
  0% {
    transform: 
      rotate3d(1,1,0,-45deg)
      rotate3d(0,1,0,0);
  }
  100% {
    transform: 
      rotate3d(1,1,0,-45deg)
      rotate3d(0,1,0,360deg);
  }
}

body {
  background: #333;
  overflow: hidden;
}

.pane {
  height: $size*$parts*2;
  width: $size*$parts*2;
  margin: $size*$parts/-1;
  perspective: 700px;

  &, div, div:before {
    position: absolute;
    top: 50%;
    left: 50%;
    box-sizing: border-box;
    transform-style: preserve-3d;
    visibility: hidden;
    backface-visibility: hidden;
  }
  
 
  .sphere {
    height: 100%;
    width: 100%;
    margin: -50%;
    animation: rotate $dur linear infinite;
    transform: 
      rotate3d(1,1,0,-45deg)
      rotate3d(0,1,0,0);
  }
  
  .slice {
    height: ceil($size*$parts*2);
    width: ceil($size);
    margin: ceil($size*$parts)/-1 round($size/-2);

    @for $i from 0 to $slices {
      &:nth-child(#{$i + 1}) {
        transform: 
          rotatey(360deg/$slices*$i)
          translatez($radius);
        
        .part:before, .side:before {
          background-color: 
            hsla(
              360deg/$slices*$i, 
              100%, 
              50%, 
              0.99); 
        }
      }
    }
  }
  .side {
    width: $size;
    height: $size/2;
    margin: round($size/-4) round($size/-2);

   &:before {
      top: 0; right: 0; bottom: 0; left: 0;
      visibility: visible;
      content: ''; 
      $triangle: AAS(
      90deg - 90deg/$parts*1, 
      90deg, 
      $height/1px);
      transform: translatez(map-get($triangle, b)*-0.25px);
    }
    &:nth-child(1) {
     margin: round($size/4) round($size/-2);

    }

    &:nth-child(2) {
     transform: rotate(180deg); 
   }
  }

  .part {

    top: 50%;
    width: ceil($size);
    height: $height;
    margin: 0 ceil($size/-2);
    transform-origin: 50% 0%;
    transform: rotatex(-90deg/$parts);
    //visibility: visible;
    
    $triangle: AAS(
      90deg - 90deg/$parts*1, 
      90deg, 
      $height/1px);
    $n: $radius - map-get($triangle, b);
    $s: 2*$n*pi()/$slices;
    $c: ($size - $s)/2;    
    $size: ceil($s);    

       &:before {
        clip-path: polygon(
          0 25%, 
          floor($c) 100%,
          ceil($s + $c) 100%, 
          100% 25%,
          0 25%);
        top: 0; right: 0; bottom: 0; left: 0;
        visibility: visible;
        content: ''; 

      }   
    .part {
      top: 100%; 
    }
    $sel: '';
    @for $i from 1 to $parts  {
      $sel: $sel + ' .part';
      #{$sel} {
        width: ceil($s);
        margin: 0 ceil($s/-2);
        $triangle: AAS(
            90deg - 90deg/$parts*($i + 1), 
            90deg, 
            $height/1px);
        $n: $n - map-get($triangle, b);
        $s: 2*$n*pi()/$slices;
        $c: ($size - $s)/2;    
        $size: round($s); 
        
        &:before { 
          @if $i == $parts - 1 {
          clip-path: polygon(
              0 0,
              50% 50%,
              50% 50%,
              100% 0,
              0 0);
          } @else {
            clip-path: polygon(
                0 0,
                floor($c) 100%,
                ceil($s + $c) 100%,
                100% 0,
                0 0);
          }
        }
      }
    }
  } 
}