Create a Pure CSS3 Flipping Animation - Webforward Blog
17th March 2015
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: , , , ,
About the Author

At heart, I am a geek. I started building websites at the age of 11 and have grown from a freelancer to running three successful web agencies located in Tamworth, Cardiff and Surrey, primarily through word-of-mouth. I love web design, and I like to think that it shows in our work. My specialities lie in bespoke web development, security testing and server management but I have a passionate team around me to complete the whole package and make our businesses the number one choice.

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