title: Trying to rotate objects in Pixi.js v 4.6.2
body: <p>I'm trying to rotate an object in Pixi.js v 4.6.2 and each time I set the rotation member or call setTransform() the object rotates but also it is moved. I have tried setting the pivot point but that didn't help.</p>
  
  <p><a href="https://jsfiddle.net/jimarch/4kpuxe8g/" rel="nofollow noreferrer">Here is a fiddle</a> </p>
  
  <p>I have tried:</p>
  
  <pre><code>compass.rotation += .5;
  </code></pre>
  
  <p>and:</p>
  
  <pre><code>compassContainer.setTransform(0, 0, 1, 1,    0.5,    0,0,  00,00 );
  </code></pre>
  
  <p>and:</p>
  
  <pre><code>compassContainer.rotation += 0.5;
  </code></pre>
  
  <p>Here is all the code:</p>
  
  <pre><code>var app = new PIXI.Application(400, 400, { antialias: true });
  document.body.appendChild(app.view);
  
  // Render the compass
  var compassContainer = new PIXI.Container();
  
  var compass = new PIXI.Graphics();
  
  compass.beginFill(0xFF3300);
  compass.lineStyle(4, 0xffd900, 1);
  
  compass.lineStyle(0);
  compass.beginFill(0xFFFF0B, 0.5);
  compass.drawCircle(200, 200, 180);
  compass.endFill();
  
  compass.lineStyle(0);
  compass.beginFill(0xFFFFFF, 1);
  compass.drawCircle(200, 200, 150);
  compass.endFill();
  
  compass.lineStyle(4, 0xFF0000, 1);
  compass.moveTo(200, 20);
  compass.lineTo(200, 40);
  
  compassContainer.addChild(compass);
  
  app.stage.addChild(compassContainer);
  
  
  // Render the boat
  var boat = new PIXI.Graphics();
  
  boat.beginFill(0xFF3300);
  boat.lineStyle(4, 0xffd900, 1);
  
  boat.moveTo(200, 100);
  boat.lineTo(175, 250);
  boat.lineTo(225, 250);
  boat.lineTo(200, 100);
  boat.endFill();
  
  // Add boat
  app.stage.addChild(boat);
  
  
  // Rotate compass
  // compass.rotation += .5;
  compassContainer.setTransform(0, 0, 1, 1,    0.5,    0,0,  00,00 );
  // compassContainer.rotation = 0;
  </code></pre>