Change rotate animation position

Question

I am trying to implement rotate animation its working but I want to change the div position. Here is my code:-

$(function(){
var el=$('div');
el.animate({ deg: 180 }, {
            duration: 1000,
            step: function (now) {
                el.css({
                    transform: 'rotate(' + now + 'deg)'
                });
            },
            complete: function () {                    
     },
  });
});

Fiddle Demo

I want this position(now its first but I want second):-

Thanks for your hepl

Answer 1

Use translateY(-100%)

$(function(){
var el=$('div');
 el.animate({ deg: 180 }, {
                duration: 1000,
                step: function (now) {
                    el.css({
                        transform: 'rotate(' + now + 'deg) translateY(-100%)'
                    });
                },
                complete: function () {

         },
   });
});

DEMO

Answer 2

    $(function(){
    var el=$('div');
var topik = $('div').css('top');
    el.animate({ deg: 180 }, {
                duration: 1000,
                step: function (now) {
                    el.css({
                        transform: 'rotate(' + now + 'deg)',
                        top : topik+'500px',
    });
                },
                complete: function () {                    
         },
      });
    })

Dont thank me ;););)