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:
- To do this, create a new project folder with the following hierarchy. The
css3transition.cssandindex.htmlfiles are empty now and we will add the code later. Thejquery-2.1.3.min.jsfile 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/
- We are using two playing card graphic images in this example. They are
AK.pngandAQ.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/. - Put the two card images inside the
imagesfolder. - The next thing is to code the HTML with two card DIV elements. We will apply CSS transition style to these two cards elements when the page is loaded:
<!DOCTYPE html>...
