Learn to Rotate a Playing Card. Displays the Front then the Back of the Card

Introduction

This tutorial explains how to implement an image rotation animation
with JavaScript. The animation appears to flip
a playing card around the horizontal axis.
First the front of the card displays
then the back of the card displays.

This example uses JavaScript and HTML alone.
The animation runs in older browsers such as Internet Explorer 9
and older Androids.
This article briefly discusses polyfill development
for animation which runs on both older and newer
Web browsers.

CSS3 animations don't run in Internet Explorer 9,
the default browser for some Androids, and
other older browsers.
However for CSS3 features,
see the
Flip a Card CSS3 Animation with tutorial.

3D or 2.5D Animation

The example animation
appears as if a playing card flips over.
2D animation which looks like 3D is called 2.5D.

To simulate rotating a card around the horizontal axis,
gradually decrease the height to zero.
Change the image source file.
Gradually return to the full height.

Add HTML Markup for the Animation

The Image Rotation Example
Web page
includes an Image
element.
The image's id equals
im.
The image includes width and height
properties.
The Image includes an onclick
event listener named animPlay().

Implement the JavaScript Animation

JavaScript provides interactivity.
Tap the card to play the animation.

JavaScript accomplishes four tasks.
First function loadGame() executes when the
page loads. Function loadGame() obtains
a reference to the Image
we want to animate.

Second the image's onclick event listener
named animPlay(),
assigns the front of the card to the Image's src
property.
Function animPlay() initializes the
frame counter and the image's default height.
Then animPlay()
starts the timer with a 10 millisecond interval,
between calls to animForward().
The following listing demonstrates creating the timer.

timer = setInterval(
animForward,
10
);

Third function animForward()
increments the frame counter
and decreases the image's height by six pixels, for each frame of animation.
If the frame counter equals 31,
then animForward()
clears the timer,
assigns the back of the card to the Image's src
property, and
initializes a
new interval to call function
animBackward().

FourthanimBackward()
increments the frame counter and
increases the image's height by six pixels, for each frame of animation.
If the frame counter equals 62,
then animBackward()
clears the timer interval.
See the JavaScript for Image Rotation
code
for details.

Tips

Elements Move with the Animation

With fake rotation around the X axis, JavaScript decreases the image's height over time.
HTML will use the extra space, allowing elements below the image to move up into
the vertical space during the animation.
Therefore we placed the card inside a div element with
a fixed height.

Clear the Timer

JavaScript animation is fairly simple and straightforward.
However, be careful to clear the timer between function calls.
If the timer isn't cleared it continues to execute.
If another time interval is assigned to the same
timer variable, both timers execute.
The following short listing demonstrates
how to stop the JavaScript timer.

clearInterval(
timer
);

Polyfill Development

Polyfill development attempts to include both new and old features.
The goal is to activate the newest features when they're available.
However if the newest features aren't available, then
the polyfill provides old features to execute a
Web project.

For example a polyfill function
might attempt to use
CSS3 Rotation Animation.
If CSS3 animation isn't available then the polyfill
fallsback to JavaScript animation.
This tutorial offers JavaScript code, which can apply to a fallback,
for older browsers which don't run CSS3 animation.

Historically developers wrote code for the least
common denominator. For example we know JavaScript
runs on most browsers. In the past
we would simply write
JavaScript animation.
However HTML5 includes many new and optimized
features. Effective development for HTML5
might include code for the range of browsers,
with both old and new features available.
Therefore polyfill development
programs for features which aren't available yet,
with fallbacks for older browsers.

Wait for Image to Load

This example doesn't wait for the image representing
the back of the card to load, before calling
animBackward().
While the animation runs the image loads.
Usually it's better to create an onload
event listener. Begin animation after the image loads.

Summary

This tutorial explained how to implement an image rotation animation
with JavaScript. The animation appears to flip
a playing card around the horizontal axis.
First the front of the card displays
then the back of the card displays.

This example uses JavaScript and HTML alone.
The animation runs in older browsers such as Internet Explorer 9
and older Androids.
This article briefly discussed polyfill development
for animation which runs on both older and newer
Web browsers.