probably a simple question but … I don't know.

<a href="#" id="line">|</a>​

I toggle a class active when clicking on a link that rotates #line by 90°. If the class is removed again the #line rotates back to 0°.

I wonder how I can make it rotate within a full circle?

So I click it the first time it rotates to the right to 90°. If I click it again It rotates back (to the left) to 0°. However I want it to rotate to to the right again till it reaches 180°. And so forth. So it should rotate within a full circle.

/

probably a simple question but … I don't know.

<a href="#" id="line">|</a>​

I toggle a class active when clicking on a link that rotates #line by 90°. If the class is removed again the #line rotates back to 0°.

I wonder how I can make it rotate within a full circle?

So I click it the first time it rotates to the right to 90°. If I click it again It rotates back (to the left) to 0°. However I want it to rotate to to the right again till it reaches 180°. And so forth. So it should rotate within a full circle.

http://jsfiddle/5mCTd/2/

• javascript
• jquery
• css
• css-transitions

Share Improve this question Follow asked Jul 10, 2012 at 19:55 mattmatt 44.5k107107 gold badges268268 silver badges402402 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

Simple, see it here.

var angle = 90;    

$('#line').click(function() {
    $(this).css ({
        '-webkit-transform': 'rotate(' + angle + 'deg)',
           '-moz-transform': 'rotate(' + angle + 'deg)',
             '-o-transform': 'rotate(' + angle + 'deg)',
            '-ms-transform': 'rotate(' + angle + 'deg)'
    });
    angle+=90;
});​

I've mented out the CSS & JS that is not required. Do let me know if that's not the effect you're looking for. Hope it helps. :)

Easiest way: do it with JavaScript. Increase the rotation amount by 90 each time and set the element's inline style to the new rotation amount.

The biggest problem is that theoretically you want it to go from 270 to 360 not 0. So just setting four classes (0, 90, 180, 270, ... uh ... 0) isn't going to help.

The tricky part here (thanks to Anthony Mills for pointing it out) is the transition from 270 to 360 -- you cannot simply return to 0, you have to go to 360, 450, etc. Therefore, we need to take the current angle and always add 90 to it.

Trying to get the current angle from the transform property and add 90 to it isn't worth it for this, since the transform is stored as a matrix by the browser and you'd have to reverse engineer the angle from the matrix (not very difficult and there are scripts out there to do it, but why bother?)

Instead, I'm going to use N, E, W, S (North, East, West, and South) to indicate state, just so you know where the letters are ing from. Default will be N, so...

<a href="#" id="line" class="N" data-turns="0">|</a>

And then a bit of jQuery. I use the class to figure out the current angle, so I don't have to reverse the matrix from transform.

$('#line').click(function() {
    var rot = 360 * $(this).attr('data-turns');
    switch ($(this).attr('class'))
    {
        case 'N':
            rot += 0;
            $(this).removeClass('N').addClass('E');
            break;
        case 'E':
            rot += 90;
            $(this).removeClass('E').addClass('S');
            break;
        case 'S':
            rot += 180;
            $(this).removeClass('S').addClass('W');
            break;
        case 'W':
            rot += 360;
            $(this).attr('data-turns', $(this).attr('data-turns') + 1);
            $(this).removeClass('W').addClass('N');
            break;
        default:
            $(this).attr('class', 'N');
    }
    $(this).css('transform', 'rotate('+rot+'deg)');
});

Note that this only works if you aren't using any classes on #line. If you are, you'll have to use if/else if/else with hasClass() instead of switch with attr('class'). Really, there are probably better fields to use than class for storing this information (the HTML5 data- fields, for example); I just used class because it was quicker/easier to write the CSS and jQuery.

EDIT: Added N2 for the 360deg option so rotation pletes. Not 100% sure if the N2 to E transition will rotate as desired. Thanks to Anthony Mills for mentioning this.

EDIT2: Removed CSS styling altogether, switched to calculating the correct rotation based on the class and a particular data- field, namely data-turns.