: CSS hover rotation holds position on open

Question

I rotate the object using CSS when I hover over it and would like it to stay in a new position as it moves. I searched around, but the only thing I could find was css: hover rotate element and keep a new position that seems to go beyond.

Is it possible to achieve this effect solely with CSS? I want the icon to stay at position 180 as soon as you stop hanging.

I used this code:

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

It is also a font icon, if that matters.

---

Edit is a simple CSS solution for everyone who needs it (taken from comments):

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

Answer 1

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;
}

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

Hide result

Answer 2

JS, ( mouseover). 1- , :

var rect = document.querySelector('.rectangle')

function rotate() {
  this.classList.add('rotate');
  
  rect.removeEventListener('mouseover', rotate);
}

rect.addEventListener('mouseover', rotate);

.rectangle {
  width: 100px;
  height: 100px;
  background: gold;
}

.rotate {
  animation: rotate 0.5s linear;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(180deg);
  }
}

body {
  padding: 30px;
}

<div class="rectangle"></div>

Hide result

Answer 3

transform CSS , :

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

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

body {
  padding: 100px;
}

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

Hide result

Answer 4

, JQuery , .

, div , .

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

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

  });

});

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

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

Hide result

Answer 5

, , , , .

, CSS,

.icon {
    transition: transform 0.5s;
}

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

:hover psuedo

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

, !

This works because I initially set the transition to 0.5 s by default. In this case, it means both forward and backward. By placing the property transitioninside the hover, I have a 0.5 s transition when the hover is activated, and a 0 s transition (default) when the icon is not displayed. When hovering at 0 s, it means that it simply instantly returns to its original position, invisibly to the viewer.