How can I make it so that when I activate the picture, it will not just turn and immediately return to the previous position, but stay until I press it again?

  • What is meant by activation ? - Grundy
  • What is activation? Most likely to write on js. - Jean-Claude
  • "again I will not press" apparently, this activation is pressing - lexxl
  • when activated, it is when pressed ... that is, as with a pseudo-element: active - darkwoolf

1 answer 1

Javascript Option

window.onload = function() { var arrow = document.getElementById('arrow'); arrow.onclick = function() { this.style.transform = (this.style.transform == "rotate(90deg)") ? "rotate(0deg)" : "rotate(90deg)" } } 
 #arrow { width: 50px; height: 50px; transition: all 1s; } 
 <div id="arrow"> <img src="http://placehold.it/50x50/" alt="" /> </div>

CSS option

 input { display: none } img { transition: all 1s } input:checked + img { transform: rotate(90deg); } 
 <label for="arrow"> <input type="checkbox" id="arrow" /> <img src="http://placehold.it/50x50/" alt="" /> </label>