React carousel of cards

-- HTML --
<div id="carousel-container" class="col-xs-4"></div>      
    
-- CSS --
#carousel-container {
  height: 80px;
  width: 60px;
  position: relative;
       perspective: 3000px;
   -ms-perspective: 3000px;
  -moz-perspective: 3000px;
  -webkit-perspective: 3000px;
  perspective-origin: -200px 400px;
}

div .card {
  border: solid #00f 3px;
  position:absolute;
  display: block;
  margin-left:5px; 
  height:80px;
  width:56px;
  background: #fff;
  transition:transform 1s;
}

#carousel {
  height: 100%;
  width: 100%;
  top:0px;
  left:0px;
  position:absolute;
  transform-style: preserve-3d;
  transition:transform 3s;
} 
    
-- javascript --
  var intervalID,
      loopcount=0;
  // スタートボタン
  $('#startBtn').on("click",function(){
    // カードを展開
    for (var i=0; i<length; i++) {
      var
       deg = 360/52 * i,
       tz = Math.round( ( 60 / 2 ) / Math.tan( Math.PI / 52 ) ) * -1; 
       
      $("#card-" +cardOrder[i].index)
        .delay(20*i)
        .animate()
        .css({
              "transform":"rotateY(" + deg +"deg) translateZ(" + tz +"px)",
             });
    }
    // 回転処理
    if (loopcount>0){ rotation()};
    intervalID = setInterval(rotation,3100); // 一定間隔で回転させる
  });
  // ストップボタン
  $('#stopBtn').on("click",function(){
    clearInterval(intervalID); // 回転を止める
  });
  // 回転関数
  function rotation(){
      loopcount++;
      $("#carousel")
        .animate()
        .css({
              "transform":"rotateY(" + 90*loopcount +"deg)",
             });
  }