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.
If you want to maintain the rotated state, you may have to use a little JQuery to check when the transition ends and change the class so it doesn't revert back to its original state on blur.

This way the div is rotated once and then its class is changed to maintain the rotated state.

```js
$('.rotate').hover(function () { 
    $(this).addClass("animate");
    $(this).one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',   
    function(e) {

  $(this).removeClass('rotate').addClass('rotated');

  });

});
```

```css
.rotate {
  width: 100px;
  height: 100px;
  background: gold;
  transition-property: transform;
  transition-duration: 1.5s;
  transition-timing-function: linear;
}

.animate {
  animation: rotate 1s linear;
  transform: rotate(180deg);
  animation-play-state: running;
}
.rotated
{
  width: 100px;
  height: 100px;
  background: gold;
  transform: rotate(180deg);
}

body {
  padding: 30px;
}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="rotate">some text</div>
```