Go Back

Create a Pure CSS3 Flipping Animation

alt

The Demo

With CSS3 you can create anything from an elegant fade in to an amazing special effect. One CSS3 effect somewhere in between is the CSS flip effect, whereby there’s content on both the front and back of a given container. This tutorial will show you how to create the effect in a simple manner without lots of CSS. The following code works in Firefox, Chrome, Opera and IE10+.

HOVER OVER ME!

YAY!

The HTML

The HTML structure to accomplish the two-sided effect is as you would expect it to be:

<div class="flip_container">
      <div class="flip_effect">
      <div class="flip_front"><!-- front content --></div>
      <div class="flip_back"><!-- back content --></div>
   </div>
</div>

The CSS

Next up, the CSS! I can’t believe the little amount of CSS needed to make the animation function.

/* OUR WRAPPER */
.flip_container {
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -o-perspective: 1000;
  perspective: 1000;

  -moz-transform: perspective(1000px);
  -moz-transform-style: preserve-3d;
}

/* FLIP BACK */
.flip_container:hover .flip_back, .flip-container.hover .flip_back {
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -o-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  transform: rotateY(0deg);
}

/* FLIP FRONT */
.flip_container:hover .flip_front, .flip-container.hover .flip_front {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.flip_container, .flip_front, .flip_back {
  display:block;
}

/* TRANSITION SPEED */
.flip_effect {
  transition: 0.6s;
  transform-style: preserve-3d;
  position: relative;
}

.flip_front, .flip_back {
  display: block;
  width:100%;
  height:264px;
  padding:50px 0 0;

  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;

  -webkit-transition: 0.6s;
  -webkit-transform-style: preserve-3d;
  -moz-transition: 0.6s;
  -moz-transform-style: preserve-3d;
  -o-transition: 0.6s;
  -o-transform-style: preserve-3d;
  -ms-transition: 0.6s;
  -ms-transform-style: preserve-3d;
  transition: 0.6s;
  transform-style: preserve-3d;

  position: absolute;
  top: 0;
  left: 0;
}

/* FRONT */
.flip_front {
  z-index: 2;
  /* for firefox 31 */
  transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
}

/* BACK */
.flip_back {
  -webkit-transform: rotateY(-180deg);
  -moz-transform: rotateY(-180deg);
  -o-transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
  padding:15px;
}

Stay tuned for future updates!

Facebooktwittergoogle_pluspinterestlinkedinmailFacebooktwittergoogle_pluspinterestlinkedinmail
Tags: , , , ,

Subscribe to our mailing list and we will keep you up to date with our latest blog posts!