translate（）似乎导致rotate（）无法在Velocity.js

Question

我正在尝试制作动画。动画假设是从地面向太空爆炸的火箭。一旦进入太空，一个按钮将被点击，它将在另一个方向旋转并朝那个方向发射。我遇到的问题是rotateZ轴似乎保持在默认位置，而图像在旋转之前被转换到另一个位置。因此，不是图像只是简单地向右旋转，它向右旋转一个大圆圈。我已经搞砸了background-origin属性来解决这个问题，但我无法让它正常工作。

var square = $('#square');
var rotate = $('#rotate');

square.velocity({rotateZ: '-90deg'});
square.velocity({translateY: '-10vw',translateX: '50vh'},{duration: 2000});

rotate.click(function(){
    square.velocity({rotateZ: '20deg'});
});