Make a card flip effect purely with CSS

2015-10-11 00:00:00 by Mike

Here is a straight forward way to make a card flip animation with HTML and CSS only.
When a user hovers over the element, the CSS :hover styles do the magic.
It even works for touch devices.

It will look something like this when done:

Here is the HTML:

<section id="main" class="" ontouchstart="this.classList.toggle('hover');">  
  <div class="flipper">
    <div class="front">
        Front side
    <div class="back">
        Reverse side

Here is the CSS:

h1,h2 {
  font-family: Helvetica;
/* Begin: animations */
section#main {
  -webkit-perspective: 1000;
  -moz-kit-perspective: 1000;
  perspective: 1000;
/* flip the pane when hovered */
section#main:hover .flipper, section#main.hover .flipper {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  transform: rotateY(180deg);
section#main, .front, .back {
  width: 200px;
  height: 200px;
/* flip speed goes here */
.flipper {
  -webkit-transition: 0.6s;
  -moz-transition: 0.6s;
  transition: 0.6s;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  text-align: center;
  position: relative;
/* hide back of pane during swap */
.front, .back {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
.front {
.back {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  transform: rotateY(180deg);
.back:hover {
  z-index: 5;