Rotating image via CSS

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?

Suganth G · Accepted Answer · 2014-09-10T12:28:29.547

4

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

edited Sep 10 '14 at 12:28

answered Sep 10 '14 at 12:08

Suganth G

5,136
3
25
44

1

Instead of setting a flag and doing removeClass and addClass, you could also do a single `toggleClass` with both the chevron-right and the chevron-down. As long as initially only one class was used, it will always add one and remove the other when using toggle. – Stephan Muller Sep 10 '14 at 12:12
1

+1. Agree with Stephan's point there. Could be simplified like [here](http://www.bootply.com/ZfIyvBoSwE). Please feel free to use the demo in the answer if you wish to. – Harry Sep 10 '14 at 12:15

Stephan Muller · Answer 2 · 2014-09-10T12:19:10.540

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.

edited Sep 10 '14 at 12:19

answered Sep 10 '14 at 12:06

Stephan Muller

27,018
16
85
126

1

There should already be a class named `glyphicon-chevron-right` for the rotated version, so that can also be used. Nothing wrong with the current answer, just that it would reduce a few extra lines of code :) – Harry Sep 10 '14 at 12:09
1

I completely overlooked that, good point. Jake's answer, while not very pretty, covers that too. – Stephan Muller Sep 10 '14 at 12:11
1

Thanks, I figured I might as well update my answer with your solution since I think it's a better one. – Stephan Muller Sep 10 '14 at 12:20
And I like the fact that you still left the contents of the initial answer in there because it does provide useful information. – Harry Sep 10 '14 at 12:21

score 0 · Answer 3 · answered Sep 10 '14 at 12:09

0

Css :

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

jQuery :

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

answered Sep 10 '14 at 12:09

Luka Krajnc

915
1
7
21

score 0 · Answer 4 · edited Sep 10 '14 at 12:16

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!

Rotating image via CSS

4 Answers4

DEMO

Linked