The arguments of the transform property are functions. There are two sets of functions, 2D transform function and 3D. CSS transform functions are designed to move, scale, rotate, and skew the target DOM elements. The following shows the usage of the transforms functions.

The 3D rotation function rotates the element in 3D space by the given [x, y, z] unit vector.
For example, we can rotate the Y-axis 60 degrees by using rotate3d(0, 1, 0, 60deg):

rotate3d(x, y, z, angle)

We can also rotate one axis only by calling the following handy functions:

rotateX(angle)
rotateY(angle)
rotateZ(angle)

What is CSS3 transition? W3C explains it in one sentence:

CSS transitions allows property changes in CSS values to occur smoothly over a specified duration.

Normally, when we change any properties of the element, the properties are updated to the new value immediately. Transition slows down the changing process. It creates smooth in-between easing from the old value towards the new value in the given duration.

You have to note that the front face has a higher z-index than the back face. When we flip the card, we rotate the front face to back and back face to front. We also swap the z-index of the front and back face.

When a card is “removed”, its container has the class “card-removed” which make the element “disappear” (opacity is set to 0, or, for IE browsers version less than 9, the display:none property is set).

All cards are in on single image. To display each one (from a predefined set) we have to set the background-position style property for them:

Having this, we can now take care of the game engine.