Вращение по клику Javascript

Question

Я хочу повернуть этот div по щелчку, когда он щелкнул, он должен был оставаться в повернутом состоянии (45deg). но когда вы нажмете еще раз, он вернется к исходному вращению (0дег).

Это мой код прямо сейчас, может быть, кто-то может мне помочь !?

JSFIDDLE:

https://jsfiddle.net/sz2yfr51/2/

КОД:

var boxopen = document.getElementById('boxopen'); 
boxopen.addEventListener("click", function(){ 
    boxopen.style.animation = "rotate 2s"; 
    boxopen.style.webkitAnimation = "rotate 2s"; 
}); 

Answer 1

Вы можете использовать style.transform и style.transition:

var boxopen = document.getElementById('boxopen'); 
var rotate = 0; 

boxopen.addEventListener("click", function(){ 
    rotate = rotate ? 0 : 45; 
    boxopen.style.transform = "rotate(" + rotate + "deg)"; 
    boxopen.style.transition = "transform 2s"; 
}); 

https://jsfiddle.net/sz2yfr51/8/

Answer 2

Все, что вам нужно сделать, это поддерживать состояние с помощью переменной и обратной анимации для этого состояния.

Также добавьте animation-fill-mode : forwards;, чтобы разрешить объект поселиться в конечном состоянии ключевого кадра.

Следующий код может использоваться для изменения предоставленного вращения.

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

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

Заканчивать эту скрипку: https://jsfiddle.net/t60Lsmqj/