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](https://stackoverflow.com/questions/23313727/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: 
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.
You also need an initial `transform` state in the regular CSS of your element, so that it can transform between two defined states: 

```css
.rotate {
  width: 20px;
  height: 100px;
  background: blue;
  transition: 0.9s;
  transform: rotate(0deg);
}

.rotate:hover {
  transform: rotate(180deg);
}

body {
  padding: 100px;
}
```

```html
<div class="rotate"></div>
```