:hover rotation CSS keep position on uncover

Question

I am rotating an object with CSS upon hovering, and would like for it to remain in it's new position as you unhover it. I have searched around, but the only thing I could find is css :hover rotate element and keep the new position, which seems to go above and beyond.

Is this effect possible to achieve purely with CSS? I want the icon to remain at the 180 position once you stop hovering.

I used this code:

i.fa.fa-globe:hover { 
    color: #e9204f;
    transition: 0.9s;
    transform: rotatey(180deg);
}

Also it's a font-awesome icon if this makes any difference.

---

Edit - The easy CSS solution for everyone else who needs it (taken from the comments):

.lovernehovermarket i.fa.fa-rocket { 
    transform: rotate(0deg);
    transition: transform 999s;
}

Answer 1

I had a circular icon that I wanted to rotate on every hover, not just the first, and not rotate when un-hovered.

Original

I saw this problem when I had CSS that looked like this

.icon {
    transition: transform 0.5s;
}

.icon:hover {
    transform: rotate(90deg);
}

Solution

The simple solution was to put the transition inside the :hover psuedo class

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

Boom, done!

This works because I was originally setting the transition to be 0.5s by default. In this case, that means both forward and backward. By putting the transition property inside the hover, I have a 0.5s transition when hover is activated, but a 0s transition (the default) when the icon is un-hovered. Having a 0s hover means it just instantly snaps back to position, invisibly to the viewer.

Answer 2

I you want a pure CSS solution, you can set a transtion time to go back to the base state quite high.

It's not for ever, but it's pretty close for most users:

.test {
    display: inline-block;
    margin: 10px;
    background-color: tomato;
    transform: rotate(0deg);
    transition: transform 999s 999s;
}
.test:hover {
    transform: rotate(90deg);
    transition: transform 0.5s;
}

<div class="test">TEST</div>