jquery - JavaScript rotation is wrong after translating -

I am using velocity.js for animation.

For the first time I am translating and rotating an object. After the animation is complete I need to rotate the object by an additional 360 degree.

The problem is that during the second animation the rotation axis is off instead of rotating around the center instead of the object revolves around its original point.

  $ Velocity (obj, "stop"); $ .Vojotity (obj, {translate x: pause, rotate z: rotation + 'degree'}, {duration: 1000}, full: function () {$ .vz, {rotateZ: "360deg"}, {duration: 1000});}});  

What can be the problem?

UPDATE

Coding that shows this issue:

Sorry, I do not have enough points to comment, but the hook (the second answer is correct). Just $ Add. Hook (circle, "translate y", "0");

  var cycle = $ (". Circle "); Circle.velocity ({translateX: 500, rotateZ: 360}, {duration: 2500}). Delay (500) Vivek ({rotateZ: -360 * 2, translateY: 200}, {duration: 2500}); $ Visol Hook (circle, "translate y", "0"); Circle.delay (500) Vivek ({translateY: 0, rotateZ: -360 * 5}, {duration: 2500});  

  .circle {background: url ("https://dl.dropboxusercontent.com/u/ 16997159 / square.png "); Width: 128px; Height: 128px; }  

  & lt; Script src = "https://ajax.googleapis.com/ajax/libs/JQuery/1.1.1/jquery.min.js" & gt; & Lt; / Script & gt; & Lt; Script src = "https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.min.js" & gt; & Lt; / Script & gt; & Lt; Div class = "circle" & gt; & Lt; / Div & gt;