Поворот элемента вперед и назад

Question

Я пытаюсь повернуть элемент вперед и назад через 1 секунду, код возвращает ошибку «RangeError: Превышен максимальный размер стека вызовов» вместо поворота назад.Что я могу сделать, чтобы достичь вышеупомянутого?И что на самом деле означает это сообщение об ошибке?

var rotated = false;

function clicked() {
    document.getElementById('box').onclick = function() {
    var div = document.getElementById('box'),
        deg = rotated ? 0 : 22;

    div.style.webkitTransform = 'rotate('+deg+'deg)'; 
    div.style.mozTransform    = 'rotate('+deg+'deg)'; 
    div.style.msTransform     = 'rotate('+deg+'deg)'; 
    div.style.oTransform      = 'rotate('+deg+'deg)'; 
    div.style.transform       = 'rotate('+deg+'deg)'; 
  }
 setTimeout(reset, 1000);
function reset() {
     reset();
    }
  }
function reset() {
    document.getElementById('box').onclick = function() {
     var div = document.getElementById('box'),
        deg = rotated ? 0 : -22;

    div.style.webkitTransform = 'rotate('+deg+'deg)'; 
    div.style.mozTransform    = 'rotate('+deg+'deg)'; 
    div.style.msTransform     = 'rotate('+deg+'deg)'; 
    div.style.oTransform      = 'rotate('+deg+'deg)'; 
    div.style.transform       = 'rotate('+deg+'deg)'; 
  }
}


         body{
    background-color:#ccc;
    }    
     #cont{
        width:90%;
        height:104%;
        background-color:white;
        position:absolute;
        left:65px;
        top:-30px;
    }
    #box{
      background-color:black;
      width:15%;
      height:24.6%;
      -webkit-transition: all 0.5s ease-in-out;
      -moz-transition: all 0.5s ease-in-out;
      -o-transition: all 0.5s ease-in-out;
      transition: all 0.5s ease-in-out;
      position:absolute;
      top:35.7%;
       left:41.7%;
   }