Css3 stop after finishing rotation?

Question

I am wearing transform: rotate(90deg) to rotate a div when I put the mouse on top. Once I remove it, it returns to its initial position. There is a way to stop it?

I have my code like this

.openn{
    transition: transform 0.5s ease-in; 
}
.openn:hover{
    transform: rotate(90deg);
}

<div class="openn">
  <i class="fa fa-chevron-right fa-2x openn" aria-hidden="true"></i>
</div>

Answer 1

With Jquery

Using so, as in the other answer will make all elements that has the class class="openn" are affected, which can be a major headache:

$('.openn').hover(function(){
   // afeta TODOS os elementos com classe openn de uma vez
   $('.openn').css('transform', 'rotate(90deg)');
});

Then use the this, for if you have more than one element with the class .openn all elements will be affected instead of only affecting the hover.

$('.openn').hover(function(){
   // afeta somente o elemento que disparou o evento, não afetando os outros elementos com classe openn
   $(this).css('transform', 'rotate(90deg)');
});

Another detail might be preferable to use a CSS class with the name .hover (not to be confused with :hover), because this way the CSS animation is all organized inside the same CSS, instead of mixing with Javascript.

$(document).on('mouseover', '.openn', function() {
   $(this).addClass("hover");
});

.openn{
    width: 32px;
    height: 32px;
    transition: transform 0.5s ease-in;
}
.openn.hover{
    transform: rotate(90deg);
}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="openn">
  <i class="fa fa-chevron-right fa-2x openn" aria-hidden="true"></i>
</div>
<br>
<br>
<br>
<div class="openn">
  <i class="fa fa-chevron-right fa-2x openn" aria-hidden="true"></i>
</div>

With pure Javascript

Importing jQuery only for a simple effect like this is totally unnecessary, if you don’t use jQuery, you can just do so:

function classOpenn() {
    this.classList.add("hover");
}

var openns = document.querySelectorAll('.openn');

for (var i = 0, j = openns.length; i < j; ++i) {
    openns[i].addEventListener("mouseover", classOpenn);
}

.openn{
    width: 32px;
    height: 32px;
    transition: transform 0.5s ease-in;
}
.openn.hover{
    transform: rotate(90deg);
}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="openn">
  <i class="fa fa-chevron-right fa-2x openn" aria-hidden="true"></i>
</div>
<br>
<br>
<br>
<div class="openn">
  <i class="fa fa-chevron-right fa-2x openn" aria-hidden="true"></i>
</div>

Answer 2

Use jQuery to make the element hover do not go back to its originality when the mouse comes out of the top:

Reading some comments, let’s go to the editions!

$('.openn').hover(function(){

   $(this).css('transform', 'rotate(90deg)');

});

Remembering that you must include the jQuery library for this to work (If not already included).

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

The .hover() is an event capable of combining events mouseenter() and mouseleave(), that is written here. (The famous two birds with one stone). This facilitates us in writing the code, and we have the power to manipulate events in any way we want. An example of the manipulation of the two events:

$('.l').hover(function(){


 $(this).css('border-radius','50%');

},function(){

  $(this).css('background-color','white');
  $('body').css({'transform':'rotateY(-180deg)','background-color':'black'});
  
  
  
})

.l{

  padding: 5px;
  transition: 0.5s;
  width: 100px;
  height: 100px;
  background-color: yellow;

}

.openn{
   transition: transform 0.3s ease-in
 }


body{transition: 2s;}

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

The advantage of using the .hover() is that we can manipulate any element of the page without the need to manually declare the two events that would make this service. He is similar to :hover CSS but infinitely more powerful since we’re not stuck with just one element and its originality.

Answer 3

Although the question does not mention the tags jquery or javascript, a solution is to detect by jQuery when the transition ends and change the style of the element:

Using jQuery:

$(".openn")
.on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd",
function(){
	$(this).css('transform','rotate(90deg)');
});

.openn{
	transition: transform 0.5s ease-in; 
}
.openn:hover{
	transform: rotate(90deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="openn" style="display: block; width: 100px; height: 100px; background: red;">
  <i class="fa fa-chevron-right fa-2x openn" aria-hidden="true"></i>
</div>