Rotate Image

HTML

<html>
<head>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" type="text/css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
</head>
<body>
<div class="container">
  <div class="game_area">
    <div class="game_working">
      <div class="rotatableAra">
        <div class="leftplank"></div>
        <div class="rightPlank"></div>
        <div class="plank droppablePlank"></div>
      </div>
    </div>

    <div class="draggableArea">
      <div  class="draggableweight" data-wgt="5" data-tp="15" style="width:30px;" >
        <img src="http://s3.postimg.org/xv5bllc3j/a12.png">
      </div>
      <div class="draggableweight" data-wgt="5" data-tp="15" style="width:30px;">
        <img src="http://s3.postimg.org/xv5bllc3j/a12.png">
      </div>
      <div class="draggableweight big" data-wgt="10" data-tp="0" style="width:45px;height:83px;">
        <img src="http://s3.postimg.org/aw8m2og3j/image.png" alt="">
      </div>
    </div>
    <div class="middleKnob"></div>
  </div>
  <div class="game_footer"></div>
</div>
</body>

CSS

* {
  margin: 0;
  padding: 0;
}
body {
  background: #89C156;
}
.container {
  height: 550px;
  background: url(http://s3.postimg.org/8u84ofi4j/bg_sky.jpg) repeat-x;
}
.game_area {
  width: 950px;
  margin: auto;
  height: 80%;
  position: relative;
  /*border: 1px solid;*/
}
.game_footer {
  height: 20%;
  background: #89C156;
}
.middleKnob {
  background: url("http://s3.postimg.org/yypfxjwqn/middle_knob.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
  bottom: 0;
  height: 127px;
  left: 40.3%;
  position: absolute;
  width: 150px;
}
.plank {
  background: url("http://s3.postimg.org/5yv1hke4j/plank.jpg") repeat scroll 0 0 rgba(0, 0, 0, 0);
  height: 9px;
  overflow: hidden;
  position: absolute;
  width: 543px;
  z-index: 2;
  top: 100px;
}
.rotateleft {
  -webkit-transform: rotate(-19deg);
  -ms-transform: rotate(-19deg);
  -o-transform: rotate(-19deg);
  transform: rotate(-19deg);
  transition: all 2s ease;
}
.rotateRight {
  -webkit-transform: rotate(19deg);
  -ms-transform: rotate(19deg);
  -o-transform: rotate(19deg);
  transform: rotate(19deg);
  transition: all 2s ease;
}
.draggableweight {
  position: relative;
  float: left;
  margin-left: 10px;
  bottom: 0px;
  z-index: 1;
  /*height:53px;*/
  height: 83px;
  width: 30px;
  overflow: hidden;
}
.draggableweight.dropped {
  position: absolute;
  float: none;
  margin-left: 0px;
  bottom: auto;
  top: 17px;
}
.draggableweight img {
  bottom: 0;
  position: absolute;
  width: 30px;
}
.draggableArea {
  float: left;
  left: 20%;
  position: relative;
  top: 81%;
}
.leftplank{
  height: 9px;
  left: 2px;
  top: 100px;
  position: absolute;
  width: 240px;
  z-index: 1;
}
.rightPlank{
  height: 9px;
  position: absolute;
  top: 100px;
  right: 2px;
  width: 240px;
  z-index: 1;
}
.rotatableAra{
  height: 200px;
  position: absolute;
  width: 543px;
  top: -100px;
}
.game_working{
  border: 1px solid transparent;
  display: block;
  float: left;
  height: auto;
  left: 20%;
  position: relative;
  top: 77%;
 ...

JavaScript

$(document).ready(function() {
  monkeyPatch_mouseStart()
  var leftArray = { 0: 0,1: 0, 2: 0 };
  var rightArray = {0: 0,1: 0, 2: 0 };

  var plankTop = $('.rightPlank').position().top;
  var rotateOffset = $('.rotatableAra').offset();
  var offsetCenter =  $('.rotatableAra').width() / 2;
  var xCenter = rotateOffset.left + $('.rotatableAra').width() / 2;

  function degreesToRadians(degrees) {
    return degrees * (Math.PI / 180)
  }

  function findWight() {
    leftCount = 0;
    for (var key in leftArray) {
      leftCount += leftArray[key];
    }
    rightCount = 0;
    for (var key1 in rightArray) {
      rightCount += rightArray[key1];
    }
    if (leftCount > rightCount) {
      $('.rotatableAra').removeClass("rotateleft rotateRight");
      $('.rotatableAra').addClass("rotateleft");
    } else if (leftCount < rightCount) {
      $('.rotatableAra').removeClass("rotateleft rotateRight");
      $('.rotatableAra').addClass("rotateRight");
    } else {
      $('.rotatableAra').removeClass("rotateleft rotateRight");
    }
  }
  $('.leftplank').droppable({
    greedy: true,
    tolerance: 'touch',
    drop: function(event, ui) {
      $textval = ui.draggable.data("wgt");
      ind = $('.draggableweight').index(ui.draggable);
      pos = Math.round(($('.leftplank').offset().left - ui.draggable.offset().left) / 30) + 8;
      leftArray[ind] = $textval * pos;
      ui.draggable.addClass("leftPlankDropped");
      findWight();
    },
    preventCollision: true,
    out: function(event, ui) {
      // $(this).droppable('option', 'accept', '.drag');
      ind = $('.draggableweight').index(ui.draggable);
      ui.draggable.removeClass("leftPlankDropped");
      leftArray[ind] = 0;
      findWight();
    },
    stop: function() {
      alert("stopped");
    }
  });

  $('.rightPlank').droppable({
    greedy: true,
    tolerance: 'touch',
    drop: function(event, ui) {
      $textval = ui.draggable.data("wgt");
      ind = $('.draggableweight').index(ui.draggable);
 ...