CSS 3D card flip

Inspired on the cool Google+ card flip, here's the breakdown.

The HTML

Plain and simple containers using DIVs. The main concept is to stack the .front and .back elements on their back.

Then when we hover on the first element we flip them both. We'll use some cool CSS to hide the backface of the elements as well as transition for the transforms.

Enough talk, let's code:

<div class="card">
   <div class="front">			
	<img src="cat1.jpeg" alt="" />
   </div>
   <div class="back">
	Meow!
   </div>
</div>

It can't get any easier than that.

The CSS

Now, this part is interesting. Pay special attention to the following properties:

  • backface-visibility
  • transition
  • transform

As explained before we need to rotate the elements. The .back div is going to be rotated 180 degrees at the start, so it'll be hidden. When we hover the container we'll do the opposite.

Check out the comments inside the code and view the Demo afterwards:

/* Styles for the card*/
.card {
  width: 200px;
  height: 200px;
  float: left;
  margin: 0.5em;
}

/* Stack both divs and hide their backs */
.card .front,
.card .back {
  position: absolute;
  backface-visibility: hidden;

  /* Apply some transitions so we see the element flip */
  transition: transform 0.3s linear 0s;

  /* Assign a perspective, try this value */
  transform: perspective(600px);

  width: 200px;
  height: 200px;
}

/* The .back element should be rotated at first, facing his back, hidden*/
.card .back {

  transform: rotateY(180deg);
  background: #27ae60;
  text-align: center;
}

/* The .front card needs to rotate when we hover, 180 degrees will do the trick*/
.card:hover .front {
  transform: rotateY(180deg);
}

/* The .back card has to rotate to 0 degrees and be visible*/
.card:hover .back {
  transform: rotateY(0);
}

Demo

View Demo

About Rick

Senior Front-end Software Engineer from Barcelona, Haidong Gumdo Instructor (korean martial art of the sword), street photographer, travel lover, TV addict, Boston Red Sox fan, and privacy advocate.

Leave a Reply

Add <code> Some Code </code> by using this tags.

*
*