CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
JQuery Mobile
JQuery Mobile

Reputation: 6301

Rotating image via CSS

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?

Upvotes: 2

Views: 1660

Answers (4)

Suganth G
Suganth G

Reputation: 5156

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

Upvotes: 4

Stephan Muller
Stephan Muller

Reputation: 27610

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.

Upvotes: 2

Mukul Kant
Mukul Kant

Reputation: 7122

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!

Upvotes: 0

Luka Krajnc
Luka Krajnc

Reputation: 915

Css : 

.spinEffect{
  -webkit-animation: spin 0.5s infinite linear;
}

jQuery :

$(function(){
    $(".whatIsClicked").click(function(){
        $("#yourDiv").addClass("spinEffect");
    });
});

Upvotes: 0

Related Questions