如何在执行onclick之后重置旋转并使其称为增益

Question

我有一个旋转的箭头图像。点击后，它会刷新验证码。我用一个短的CSS定义了它，并在单击时调用了旋转功能。这些是CSS，HTML和Javascript：

function rotatearrow() {

  arrowreload.style.webkitTransform = 'rotate(360deg)';

  arrowreload.style.MozTransform  = 'rotate(360deg)';

  arrowreload.style.msTransform  = 'rotate(360deg)';

}

function reloadcaptcha() {

  //does what's needed and plays perfectly

}

.reload {

  max-width: 32px;

  height: auto;

  transform: rotate(0);

  transition: all 0.8s;

}

<img id="arrowreload" class="reload" src="../images/reload.png" onclick="rotatearrow(); reloadcaptcha();">

现在的要点是：首次单击后旋转rotatearrow，然后旋转箭头，但是第一次后再也不会旋转。我究竟做错了什么？我必须对代码进行哪些更改？