Edit in JSFiddle

Result
HTML
JavaScript
CSS

<html>
<head>
    <title>animate method in jQuery</title>
</head>
<body>
<div id="box"></div><br /><br />
<button id="left">Rotate Left</button>
<button id="right">Rotate Right</button>
</body>
</html>

$(document).ready(function () {
        $("#left").click(function () {
            $('#box').animate({ textIndent: 0 }, {
                step: function (now, fx) {
                    if (now == 0) {
                        fx.now = 90;
                        fx.start = 90;
                    }
                    $(this).css('-webkit-transform', 'rotate(' + now + 'deg)');
                    $(this).css('-ms-transform', 'rotate(' + now + 'deg)');
                    $(this).css('-moz-transform', 'rotate(' + now + 'deg)');
                    $(this).css('-o-transform', 'rotate(' + now + 'deg)');
                },
                duration: 2000
            }, 'linear');
        });
        $("#right").click(function () {
            $('#box').animate({ textIndent: 180 }, {
                step: function (now, fx) {
                    if (now == 180) {
                        fx.now = 90;
                        fx.start = 90;
                    }
                    $(this).css('-webkit-transform', 'rotate(' + now + 'deg)');
                    $(this).css('-ms-transform', 'rotate(' + now + 'deg)');
                    $(this).css('-moz-transform', 'rotate(' + now + 'deg)');
                    $(this).css('-o-transform', 'rotate(' + now + 'deg)');
                },
                duration: 2000
            }, 'linear');
        });
    });

#box {
   width:100px;
   height:100px;
   position:absolute;
   top:100px;
   left:100px; 
   text-indent: 90px;
   background-color:red;
}