title: rotate object onclick
body: <p>So i have the code that is supposed to add when clicked "+10" button 10degree rotation to object, when clicked "+30" button 30degree rotation to the object, the 90degree position to be max available. Now it ads only by one and i dont know how to make it to move as much degree as i want it to move.</p>
  
  <p><a href="http://jsfiddle.net/9Xghf/" rel="nofollow">http://jsfiddle.net/9Xghf/</a></p>
  
  <pre><code>var rotateObject = document.getElementById("object");
  var objectRotation = 0;
  
  var add10 = document.getElementById("add10");
  var add30 = document.getElementById("add30");
  
  add10.onclick = function(){
      rotate(0, 10);  
  }
  add30.onclick = function(){
      rotate(0, 30);  
  }
  function rotate(index, limit){
      if(objectRotation &lt; 90 &amp;&amp; index &lt;= limit){
          index++;
          objectRotation++;
          rotateObject.style.transform="rotate(" + objectRotation + "deg)";
          rotateObject.style.WebkitTransform="rotate(" + objectRotation + "deg)";
          rotateObject.style.msTransform="rotate(" + objectRotation + "deg)";
          setTimeout(rotate, 50);
      }else{
      // 90 degree is the max limit for this object 
      }
  }
  </code></pre>