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">
      <h1>
        Front side
      </h1>
    </div>
    <div class="back">
      <h2>
        Reverse side
      </h2>
    </div>
</div>
</section>

Here is the CSS:

h1,h2 {
  margin-top:2.5em;
  font-weight:normal;
  color:#fff;
  font-weight:300;
  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;
  border-radius:300px;
  background:#e61;
}
.front {
  background:#595;
}
.back {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
.back:hover {
  z-index: 5;
}