Edit in JSFiddle

$(function(){
  $('#btn').on('click',spin);
})
function spin() {
    //z-indexを0から1に変更する
    $('#box1').animate({
        'z-index': 1
    },
    {
        duration: 1000, //アニメーションの時間
        //ステップ中の処理
        //引数num:処理途中の変化している値
        step: function (num) {
            //処理途中の値を使ってちょっとずつ回転させる
            $(this).css({
                transform: 'rotate(' + (num * 360) + 'deg)'
            });
            //デバッグ用にnumを出力
            $('#box2').html(num);
        },
        //完了時の処理
        //次回のことを考えz-indexを1から0に戻す
        complete: function () {
            $('#box1').css('z-index', 0);
        }
    });
}
<p id="box1"></p>
<p id="box2">0</p>
<button id="btn">回転!</button>
#box1 {
    background-color: #FCC;
    width: 50px;
    height: 50px;
}