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>

Answers:

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

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.