Rotating image via CSS - html

Question

I am working on an app that uses Bootstrap. You can see it for yourself here. When a user clicks a link, I want it to rotate. The code is very small. It looks like this:
<div class="form-group">
<ul class="list-inline">
<li><button class="btn btn-link"><span class="glyphicon glyphicon-chevron-down"></span></button></li>
<li><h5>category</h5></li>
</ul>
</div>
When a user clicks the "v" I want it to animate from "v" to ">". In other words, I want the chevron to rotate counter-clockwise 90 degrees when someone clicks it. After looking at the powerful features in CSS 3, it looks like there is a way to do this using pure CSS. Am I correct, if so, how?

Answer 1

Try this:
DEMO
<div class="form-group">
<ul class="list-inline">
<li><button class="btn btn-link"><span class="glyphicon glyphicon-chevron-down"></span></button></li>
<li><h5>category</h5></li>
</ul>
</div>
SCRIPT:
$('.glyphicon').on('click', function(){
$(this).toggleClass('glyphicon-chevron-down glyphicon-chevron-right');
});

Answer 2

To rotate an element using CSS you can simply use transform: rotate(-90deg)
However, this will not rotate it on click just yet. You will probably need javascript for that. One way to do it (using jquery, since bootstrap already requires it):
CSS:
.rotated {
transform: rotate(-90deg);
}
JS:
$('.yourElement').click(function() {
$(this).toggleClass('rotated');
});
The 'toggleClass' will make sure the rotation is reverted when you click it again. Otherwise, just use 'addClass' to only use it once.
edit
As pointed out by Harry, you could also use the already present 'icon-chevron-right' in a similar fashion:
$('.yourElement').click(function() {
$(this).toggleClass('icon-chevron-down icon-chevron-right');
});
As long as your html started with only one of those two classes, this code will always remove one and add the other.

Answer 3

Css :
.spinEffect{
-webkit-animation: spin 0.5s infinite linear;
}
jQuery :
$(function(){
$(".whatIsClicked").click(function(){
$("#yourDiv").addClass("spinEffect");
});
});

Answer 4

You can use a simple script like this.
Script:-
$(document).ready(function(){
$( ".btn.btn-link" ).click(function() {
$(this).toggleClass( "rotate" );
});
})
css:-
.rotate{
-ms-transform: rotate(180deg); /* IE 9 */
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
transform: rotate(180deg);
}
html:-
<div class="form-group">
<ul class="list-inline">
<li><button class="btn btn-link"><span class="glyphicon glyphicon-chevron-down"></span></button></li>
<li><h5>category</h5></li>
</ul>
</div>
Hope it eill work for you!