$(function() {
  $('input').keyup(function() {
    var num = parseInt($(this).val());
    if(!isNaN(num)){
      if(num <= 0) {
        $('#cricle .bg').css("transform", 'rotate(-180deg)')
      } else
        if(num > 0 && num <= 180) {
          $('#cricle .left .bg').css('transform', 'rotate(' + -(180 - num) + 'deg)');
          $('#cricle .right .bg').css("transform", 'rotate(-180deg)')
        }
      if(num > 180 && num <= 360) {
        $('#cricle .left .bg').css('transform', 'rotate(0deg)')
        $('#cricle .right .bg').css('transform', 'rotate(' + -(-num) + 'deg)');
      } else
        if(num > 360) {
          $('#cricle .bg').css("transform", 'rotate(0deg)')
        }
    }else{
      $('#cricle .bg').css("transform", 'rotate(-180deg)')
    }

  })
})