CSS AdvancedLesson #136

3D Card Flip

Here we demonstrate how to make a classic 3D object: Flipping a card.

CSS Card Flip

Here we demonstrate how to make a classic 3D object: Flipping a card.

Front

Back

The HTML Structure

Let's start with the basic HTML:

Example

Example Code

html

Try it Yourself

Live Output Preview:

The container element will house the 3D space. The card element acts as the 3D object. Two separate face elements are used for the front and back faces of the card.

The CSS Styling

First, we define the 3D container box: Apply perspective, along with height and width:

Example

Example Code

css

Try it Yourself

.container {
  width: 200px;
  height: 250px;

  perspective: 600px;
}

Now the card element can be transformed in its container's 3D space. We add width: 100%; and height: 100%;. The position: relative is used to position card faces absolutely. The transform-style: preserve-3d is essential here. It forces child elements into 3D space. Without this, the faces flatten into a 2D sheet. We also add a CSS transition, so users can see the transform take effect:

Example

Example Code

css

Try it Yourself

.card {
  width: 100%;
  height: 100%;
  position:
  relative;
  transition: transform 1s;
  transform-style:
  preserve-3d;
}

Then, we add some base styling for the two card faces. To position the faces in 3D space, we will need to reset their positions in 2D with position: absolute. To hide the back-side of the faces when they are faced away from the viewer, we use backface-visibility: hidden:

Example

Example Code

css

Try it Yourself

.face {
  position: absolute;
  height: 100%;
  width:
  100%;
  backface-visibility: hidden;
  text-align: center;

  }

Next, style the front and backside, we add a basic 3D transform of rotateY(180deg) to the backside:

Example

Example Code

css

Try it Yourself

.front {
  background: green;
}

.back {

  background: red;
  transform: rotateY(180deg);
}

With the front and back faces in place, the .card requires a style for when it is flipped. Here we do a horizontal flip when moving the mouse over the container:

Example

Example Code

css

Try it Yourself

.container:hover .card {
  transform: rotateY(180deg);
}

Full Example of Card Flip

Here is the full example of the card flip:

Example

Example Code

css

Try it Yourself

.container {
  width: 200px;
  height: 250px;

  perspective: 600px;
}

.card {
  width: 100%;
  height: 100%;
  position:
  relative;
  transition: transform 1s;
  transform-style:
  preserve-3d;
}

.face {
  position: absolute;

  height: 100%;
  width: 100%;
  backface-visibility: hidden;

  text-align: center;
}

.front {
  background: green;
}

.back {
  background: red;
  transform: rotateY(180deg);

  }

.container:hover .card {
  transform: rotateY(180deg);

  }