CSS3/jQuery 3D Carousel

index.html

<style>
  
  
  @-webkit-keyframes rotator {
    0% { -webkit-transform: rotateY(0deg);  }
    50% { -webkit-transform: rotateY(180deg); }
    100% { -webkit-transform: rotateY(359deg); }
  }
  
  
  @-webkit-keyframes rotator2 {
    0% { -webkit-transform: rotateX(5deg);  }
    50% { -webkit-transform: rotateX(-5deg); }
    100% { -webkit-transform: rotateX(5deg); }
  }
  
  
  #container  {
    -webkit-animation: rotator 10s infinite linear;
  }
  #main  {
    -webkit-animation: rotator2 10s infinite ease-in-out;
  }
  
</style>
<div id="main">
<div id="container"></div>
</div>

script.js

var c, parts;
var num = 36;
var pWidth = 200;

$(init());

function init() {
  parts = [];
  c = $('#container');
  
  for(var i=0; i<num; i++) {
    parts.push(Part(i));
  }
}

function Part(n) {
  
  var obj =  $('<div></div>');
  
  
  var offset = 0-(num/2);
  var deg = 360 / num;
  var rY = (n+offset)*deg;
  var tZ = offset*deg*2;
  var
      r = Math.floor(Math.random()*255),
      g = Math.floor(Math.random()*255),
      b = Math.floor(Math.random()*255),
      a = 0.95;
  var css_obj = {
   // left: Math.sin(offset) + 'px',
    background: 'rgba('+r+','+g+','+b+','+a+')',
    '-webkit-transform': 'rotateY('+rY+'deg) translateZ('+-tZ+'px)'
  };
  
  obj.text(n);
  obj.css(css_obj);
  c.append(obj);
//  $('body').append('<div>'+(offset)+'</div>');
  return obj;
}
 

style.scss

@import "compass";
$default-prefixes: webkit moz ms o;

@mixin build-prefix-values($property, $value, $prefixes: $default-prefixes) {
    @each $prefix in $prefixes {
        -#{$prefix}-#{$property}: #{$value};
    }
    #{$property}: #{$value};
} 

@mixin animation($value...) {
  -webkit-animation: $value;
  -moz-animation:    $value;
  -ms-animation:     $value;
  -o-animation:      $value;
  animation:         $value;
}

body {
  
}
div#main {
  
    
@include build-prefix-values('perspective', '1000px');
  @include build-prefix-values('transform-style', 'preserve-3d');
  position:absolute;
  left:50%;
  top:50%;
  
}
div#container {
    
  @include build-prefix-values('transform-style', 'preserve-3d');
  @include build-prefix-values('transform-origin', '0 0');
  @include build-prefix-values('transform', 'rotateX(32deg)');
  
  
  background:rgba(0,0,0,0.5);
  width: 0;
  height: 0;
  position:absolute;
  left:50%;
  top:50%;
  
  div {
    position:absolute;
    border-radius: 10px;
    text-align:center;
    display:table-cell;
    vertical-align:middle;
    line-height:40px;
    background: #000;
    width: 45px;
    height: 40px;
    opacity:0.94;
    left:-24px;
  } 
}