RAJNIK PATEL RAJNIK PATEL - 6 months ago 69
jQuery Question

Rotate div text after clicking on button using jquery and css

I want to rotate div text after clicking on button using jquery and css

If user click on

Rotate Left
button then text rotate in Left side

or

user click on
Rotate Right
button then text rotate in Right side

Example:

<div id="RotateDiv">Happy Birthday</div>

<button id="btnRotateLeft" type="button">Rotate Left</button>
<button id="btnRotateRight" type="button">Rotate Right</button>

Answer

Try this:

Demo: http://jsfiddle.net/ehec1gun/

var rotation = 0;

jQuery.fn.rotate = function(degrees) {
    $(this).css({'-webkit-transform' : 'rotate('+ degrees +'deg)',
                 '-moz-transform' : 'rotate('+ degrees +'deg)',
                 '-ms-transform' : 'rotate('+ degrees +'deg)',
                 'transform' : 'rotate('+ degrees +'deg)'});
};

$('#btnRotateRight').click(function() {
    rotation += 5;
    $('.rotate').rotate(rotation);
});

$('#btnRotateLeft').click(function() {
    rotation -= 5;
    $('.rotate').rotate(rotation);
});
Comments