Rotate div text after button click with jquery and css

Question

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

If the user clicks the Rotate Left button, then the text rotates on the left side
or
the user clicks the Rotate Right button, then the text rotates on the 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 1

Try the following:

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