Rotate text at button click event

Question

I need to rotate a text at different angles at button click.

I need two button, one to move text clockwise and other to move text anticlockwise.

Answer 1

try this:

html:

<input id="rotateBtn" type="submit" value="rotate"/>
<div class="textToRotate">text to be rotated</div>

css ( tip: use transform-origin to control rotation anchor point, here used only for webkit )

.rotate {
-moz-transform: rotate(7.5deg);  /* FF3.5+ */
 -o-transform: rotate(7.5deg);  /* Opera 10.5 */
 -webkit-transform: rotate(7.5deg);  /* Saf3.1+, Chrome */
 -webkit-transform-origin: 0 0 ;
 filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);  /*IE6,IE7 */
 -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)";  /* IE8 */
 }

jQuery on document ready:

 $('#rotateBtn').click(function() {
     $('.textToRotate').addClass('rotate');
 });

check it out here: http://jsfiddle.net/SebastianPataneMasuelli/YZY8J/2/

---

update: each click increments 20degrees: http://jsfiddle.net/SebastianPataneMasuelli/YZY8J/5/