javascript - Rotate, scale based in pivot point working exactly like CSS -

i trying make pixi function rotate , scale css transform work..

i made test here show, if try press run many times, see doesn't work right always.

how can fix "pixitransformlikecss" function ?

var app = new pixi.application(200, 100, {backgroundcolor : 0xffff00});  document.body.appendchild(app.view);  var img = pixi.sprite.fromimage('https://www.gravatar.com/avatar/')  app.stage.addchild(img);    //randomize scale, rotation, rotationorigin  var scale = [      0.5+((50 - math.random()*100)/100),      0.5+((50 - math.random()*100)/100)  ];  var degrotation = parseint(math.random()*100);  var rotationorigin = [    (50 - math.random()*100)/100,    (50 - math.random()*100)/100  ];    //css version  $('img').css({    transform: 'scale('+scale[0]+','+scale[1]+') rotate(-'+degrotation+'deg)',    transformorigin: rotationorigin[0]+'px  '+rotationorigin[1]+'px'  });    //pixi version  img = pixitransformlikecss( img, scale, degrotation, rotationorigin );    //function need  function pixitransformlikecss( container, scale, rotation, origin ){      container.settransform(      40,40, //position      scale[0],scale[1], //scale      -( rotation * math.pi / 180),//rotation      0,0,//skew      origin[0], origin[1] //pivot    );    return container;  }

.html{    background:red;    width:200px;    height:100px;    float:left;  }  img{    position:absolute;    left:40px;    top:40px;  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.5.1/pixi.min.js"></script>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>    <div class="html">    <img src="https://www.gravatar.com/avatar/" />  </div>  <div class="pixi"></div>

ok, working now, remade function "pixitransformlikecss"

var app = new pixi.application(200, 100, {backgroundcolor : 0xffff00});  document.body.appendchild(app.view);  var img = pixi.sprite.fromimage('https://www.gravatar.com/avatar/')      //randomize scale, rotation, rotationorigin  var scale = [      0.5+((50 - math.random()*100)/100),      0.5+((50 - math.random()*100)/100)  ];  var degrotation = parseint(math.random()*100);  var rotationorigin = [    (50 - math.random()*100)/100,    (50 - math.random()*100)/100  ];    //css version  $('img').css({    transform: 'scale('+scale[0]+','+scale[1]+') rotate(-'+degrotation+'deg)',    transformorigin: rotationorigin[0]+'px  '+rotationorigin[1]+'px'  });    //pixi version  img = pixitransformlikecss( img, scale, degrotation, rotationorigin );  app.stage.addchild(img);    //function need  function pixitransformlikecss( container, scale, rotation, origin ){    var signal = scale[0]*scale[1];    if( scale[0] < 0 && scale[1] > 0 ) signal = 1;    if( scale[1] < 0 && scale[0] > 0 ) signal = 1;       container.rotation = ( rotation * math.pi / 180)* (signal<0?1:-1);      container.pivot.set(      origin[0], origin[1]    );      var temp = new pixi.container();    temp.addchild(container);    temp.scale.set(        scale[0],scale[1]    );        container = new pixi.container();    container.addchild(temp);    container.position.set(        40 + origin[0],40 + origin[1]    );      return container;  }

.html{    background:red;    width:200px;    height:100px;    float:left;  }  img{    position:absolute;    left:40px;    top:40px;  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.5.1/pixi.min.js"></script>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>    <div class="html">    <img src="https://www.gravatar.com/avatar/" />  </div>  <div class="pixi"></div>