:hover rotation keeps position on unhover-CodePudding

I am rotating a hexagonal (6 sides shape) icon 60 degrees upon hovering and want it to stay rotated as long as you don't hover it again. If you hover the icon again, it will rotate another 60 degrees.

Is this effect possible with pure CSS ? The important part is for the icon to stay rotated for as long as you don't hover it again and to rotate another 60 degrees if you hover it.

I've tried the usual method with a transition and a transform, but the icon comes back at its original rotation when you unhover it.

.icon:hover {
    transition: transform 0.5s;
    transform: rotate(60deg);
}

CodePudding user response：

With JS you rotate the square by 10 degrees each time you hover over it:

let div = document.querySelector(".a");
        let i = 10; //degrees to rotate
        
        const rotateIt = () => {
            div.style.transform="rotate("   i   "deg)";
            i = i   10;
        }
        div.addEventListener("mouseover", rotateIt);

div.a {
      width: 100px;
      height: 100px;
      background-color: red;

    }
    div.a:hover {
      transform: rotate(20deg);
    }

<div ></div>