Ruled surfaces in js

ruled.js

(function(){

  var $cta = $('.home-action');
  var DIV = 20;
  var verticalsArr = [];
  var verticalsArr2 = [];
  var state = 0;

  var width = $cta.width();
  var verticals = width / DIV;
  var degree = 2000 / verticals;


  var init = function(){
    for (var i = 1; i < verticals; i++){
      var $vert = $('<div class="vertical" />');
      var $vert2 = $('<div class="vertical2" />');

      $vert.css({
        left: DIV * i,
        transform: 'rotate(' + degree * i + 'deg)'
      });
      $vert2.css({
        left: DIV * i,
        transform: 'rotate(' + degree * i + 'deg)'
      });

      $cta.append($vert).append($vert2);
      verticalsArr.push($vert);
      verticalsArr2.push($vert2)
    }
    state = 1;
  }


  var translate = function(){
    if (state == 0){
      for (var i = 0; i < verticalsArr.length; i++){


        verticalsArr[i].css({
          'transform-origin': 'bottom center',
          transform: 'rotate(-' + degree * i + 'deg)'
        });


        verticalsArr2[i].css({
          'transform-origin': 'top center',
          transform: 'rotate(' + (90 - (degree * i)) + 'deg)'
        });
      }
      state = 1;      
    } else {
      for (var i = 0; i < verticalsArr.length; i++){
        verticalsArr[i].css({
          'transform-origin': 'bottom center',
          transform: 'rotate(' + (90 - (degree * i)) + 'deg)'
        });
        verticalsArr2[i].css({
          'transform-origin': 'top center',
          transform: 'rotate(' + degree * i + 'deg)'
        });
      } 
      state = 0;
    }
  }

  setInterval(function(){
    translate();
  }, 3500)

  init();
  translate();
})();