Issues with a jQuery Transit implementation

Question

I am working on a prototype that is basically on a high-level an image viewer. I implemented (rotate, zoom-in, zoom-out, left, right, up and down.) I am having issues when I hit rotate first it seems to screw up the orientation of my direction controls. (actually it is doing what it is suppose to). The odd thing is, if you hit a direction control first it will work.

You can get values like ('rotation'), but I am not sure what do with them being as though I am unsure of the issue at this point.

Here is my implementation:

JS

var currentScale = 1;

 $(".icon-rotate-right").click(function () {
     $('#img-contain2').transition({
         rotate: '+=90deg'
     });
 });

 $(".icon-chevron-left").click(function () {
     $('#img-contain2').transition({
         x: '-=90'
     });
 });

 $(".icon-chevron-right").click(function () {
     $('#img-contain2').transition({
         x: '+=90'
     });
 });

 $(".icon-chevron-up").click(function () {
     $('#img-contain2').transition({
         y: '-=90',
     });
 });

 $(".icon-plus").click(function () {
     if (currentScale >= 5) {
         return false;

     } else {

         currentScale++;
         $('#img-contain2').transition({
             scale: '+=1'
         });
         $('#img-contain2').css("margin-top", "-90px");
     }

 });

 $(".icon-minus").click(function () {
     if (currentScale <= 1) {
         $('#img-contain2').transition({
             scale: '.5'
         });
         $('#img-contain2').css("margin-top", "-240px");

         if (currentScale <= 1) {
             return false;
         }

     } else {
         currentScale--;
         $('#img-contain2').transition({
             scale: '-=1'
         });
         $('#img-contain2').css("margin-top", "-240px");

     }

 }); 

HTML

<div class="inner-contain-main">
<div class="viewer">
   <div class="control-container">
      <i class="icon-rotate-right"></i><i class="icon-plus"></i><i class="icon-minus"></i>
      <div class="direction-container"><i class="icon-chevron-left"></i><i class="icon-chevron-up"></i><i class="icon-chevron-right"></i></div>
   </div>
   <div id="img-contain">
      <div  id="instructions">
         <p>Loading Preparation...</p>
      </div>
      <div  id="img-contain2"></div>
   </div>
</div>

I put a limiter on the zoom-in and out, so that is the reason for the conditional.

Answer 1

Fixed it, this seem to work:

    $(".icon-rotate-right").click(function () {
    $("#img-contain2").transition({
        x: "+=0",
        y: "+=0",
        rotate: "+=90deg"
    });
});