O'Reilly logo

HTML5 Game Development by Example : Beginner's Guide - Second Edition by Makzan

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Time for action – moving a playing card around

In this example, we will place two playing cards on a web page and transform them to a different position, scale, and rotation. We will tween the transformation by setting the transition:

  1. To do this, create a new project folder with the following hierarchy. The css3transition.css and index.html files are empty now and we will add the code later. The jquery-2.1.3.min.js file is the jQuery library that we used in the previous chapter.
    index.html
    js/
      js/jquery-2.1.3.js
    css/
      css/css3transition.css
    images/
  2. We are using two playing card graphic images in this example. They are AK.png and AQ.png. The images are available in the code bundle or you can download them from the book assets website at http://mak.la/book-assets/ ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required