title: How to make card flip animation in Phaser 3
body: <p>I'm trying to make a card flip when is touched (working on mobile). So far I've only been able to change one frame for another (front to back), without any transition, so it feels unnatural. The idea is that you touch the screen, a card shows up, then ou touch it again and the card slowly flips, so you can see something in the back of the card.</p>
  
  <p>I'm using the latest iteration of Phaser 3.</p>
  
  <p>I have a working example, but it's made in Phaser 2, so I'm having a really hard time trying to update the code to Phaser 3.</p>
  
  <pre><code>var config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  scene: {
      preload: preload,
      create: create
  }
  };
  
  var game = new Phaser.Game(config);
  
  function preload() {
  this.load.image('fondo', 'img/backgroundhome.png');
  this.load.spritesheet('carta', 'img/spritesheet.png', { frameWidth: 196, frameHeight: 339 });
  this.load.image('reverso', 'img/reversecard.png');
  }
  
  function create() {
  this.add.image(400, 300, 'fondo');
  let cartaObj = this.add.image(75, 100, 'carta').setOrigin(0, 0).setInteractive();
  
  this.anims.create({
      key: 'frente',
      frames: this.anims.generateFrameNumbers('carta', { start: 0, end: 0 }),
      frameRate: 1,
      repeat: -1
  });
  
  this.anims.create({
      key: 'atras',
      frames: this.anims.generateFrameNumbers('carta', { start: 1, end: 1 }),
      frameRate: 1,
      repeat: -1
  });
  
  var tween1 = this.scene.tweens.add({
      targets: cartaObj,
      scaleX: 10,
      scaleY: 10,
      ease: 'Linear',
      duration: 300,
      repeat: 0,
      yoyo: false
  });
  
  cartaObj.once('pointerup', cargaAnim, this);
  }
  
  function cargaAnim() {
  tween.start();
  }
  </code></pre>
  
  <p>Tap the screen, show up a card (in this case a have a spritesheet with 2 frames, front and back), tap the card again and it flips slowly to show the back of the card.</p>