使用javascript单击时旋转div

Question

我想在单击时旋转此div，但我不知道如何。。

这是我现在的代码，也许有人可以帮我！？

HTML：

<div class="centerbox">
  <div id="boxopen" style="cursor:pointer"></div>
</div>  

CSS：

#boxopen {
    width: 100px;
    height: 100px;
    margin: -9px 49.9%;
    position: absolute;
    border: 6px double #1a1a1a;
    z-index: 110;
}


.centerbox {
    margin: 0 -64.5px;
}

 @keyframes rotate {
    0% { 
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -moz-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }
}

Javascript：

<script type="text/javascript">
boxopen.addEventListener("click", function(){
  boxopen.style.animation = "rotate 2s";
  boxopen.style.webkitAnimation = "rotate 2s";
});

</script>

它将在响应式布局中使用，因此我将其定位为：绝对；也许有人知道解决此问题的更好方法哈哈。

谢谢！

Answer 1

在您的JS中，您缺少选择DIV的权限。

Answer 2

类似这样的事情可以做到：

Answer 3

这可能很有趣