title: HTML5 Canvas Flip Card Animation
body: <p>I am trying to create flip card effect using html canvas by drawing it in the canvas.</p>
  
  <p>no ccs3 tricks needed. It should be done in a native manner;</p>
  
  <p>this is my initial test using phaser.js by changing the scale</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  
  &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="game_canvas"&gt;
  
  
          &lt;/div&gt;
          &lt;script src = "jquery.min.js"&gt;&lt;/script&gt;
          &lt;script src = "phaser.min.js"&gt;&lt;/script&gt;
  
          &lt;script&gt;
  
          var game;
          var sprite;
  
              $(document).ready(function(){
  
                  game = new  Phaser.Game(640, 480, Phaser.AUTO, 'game_canvas', {
                      preload : preload,
                      create : create,
                      update : update
  
                  });
  
                  function preload () {
  
                      game.load.image('card','download.png');
  
                  }
  
                  function create() {
  
                      this.delay = 1000;
                      this.spawn = 0;
  
                      sprite = game.add.sprite(game.width/4, game.height/4, 'card');
  
                  }
  
                  function update() {
  
                      console.log(this.spawn &gt; game.time.now);
  
                      if (this.spawn &gt; game.time.now) {
                          return;
                      }
  
                      this.spawn = game.time.now + this.delay;
  
                      sprite.scale.x *= -1;
  
                  }
  
              });
  
          &lt;/script&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and what i want to attain is like this using the canvas</p>
  
  <p><a href="http://www.turnjs.com/#samples/steve-jobs/10" rel="nofollow">http://www.turnjs.com/#samples/steve-jobs/10</a></p>
  
  <p>anyone has any idea on how to do it would be a great help</p>
  
  <p>thanks in advance</p>
  
  <p>here is the current demo
  <a href="http://sopronioli713.github.io/test/" rel="nofollow">http://sopronioli713.github.io/test/</a></p>