How can I rotate an element?

Question

Here is my code:

$('.click').on('click', function(){
  $(this).next('div').toggle(100);
});

.click{
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="click">click  <i class="fa fa-caret-down" aria-hidden="true"></i></div>
<div>something</div>

As you see that arrow (which is next to click) is fixed .. How can I rotate it 45° when user click on the div.test ?

Possible duplicate of [Want to rotate element in jquery](http://stackoverflow.com/questions/10908760/want-to-rotate-element-in-jquery) — Rob, Aug 20 '16 at 03:11

score 4 · Accepted Answer · answered Aug 20 '16 at 03:23

Another option: you can use fontawesome's fa-caret-right and toggle it!

Let me know your feedback. Thanks!

$('.click').on('click', function(){
  $(this).next('div').toggle(100, 'linear', function(){
       $(this).prev('div').find('i').toggleClass('fa-caret-down');
       $(this).prev('div').find('i').toggleClass('fa-caret-right');
  });
});

.click{
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="click">click  <i class="fa fa-caret-down" aria-hidden="true"></i></div>
<div>something</div>

I really don't understand why did you use `.prev()` in this case? What `.prev()` does exactly in there? — stack, Aug 20 '16 at 03:43

score 3 · Answer 2 · answered Aug 20 '16 at 03:15

You can simply use transform CSS property. Read more about it in MDN docs.

$('.click').on('click', function(){
  $(this).next('div').toggle(100)
  $(this).children('i').toggleClass('rotate');
});

.click{
  cursor: pointer;
}

.rotate {
  transform: rotate(270deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="click">click  <i class="fa fa-caret-down" aria-hidden="true"></i></div>
<div>something</div>

How can I rotate an element?

2 Answers2