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 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:

```css
.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;
}
```

```html
<div class="test">TEST</div>
```
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>
```