<div id="container">
  <!-- Login -->
    <div class="box"></div>
  <!-- Signup -->
    <div class="box-back"></div>
</div>
<button id="animate" class="livedemo">Sign Up Now</button>
@import "compass/css3";

/* Variables */
$perspective: 1000px;

/* Mixins */
@mixin perspective() {
      -webkit-perspective: $perspective;
      -moz-perspective: $perspective;
      -ms-perspective: $perspective;
      -o-perspective: $perspective;
      perspective: $perspective;
}

html, body {
      width: 100%;
      height: 100%;
      margin: 0;
      background: rgba(55, 55, 55, 1);
      font-family: Helvetica, Arial, sans-serif;
      
    }

    #container {
      @include perspective;
      width: 100%;
      height: 100%;
    }

    .box,
    .box-back {

      background: url(http://aerotwist.com/static/tutorials/protip-nobody-expects-3d/flip-card-front.jpg) center center no-repeat;
      background-size: 200px 300px;

      width: 200px;
      height: 300px;
      border-radius: 3px;
      position: absolute;
      left: 50%;
      top: 50%;
      margin: -150px 0 0 -100px;

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

    }

    .box-back {

      background: url(http://aerotwist.com/static/tutorials/protip-nobody-expects-3d/flip-card-back.jpg) center center no-repeat;
      background-size: 200px 300px;

      -webkit-transform: rotateY(180deg);
      -moz-transform: rotateY(180deg);
      -ms-transform: rotateY(180deg);
      -o-transform: rotateY(180deg);
      transform: rotateY(180deg);
    }

    .livedemo {
      /*width: 100px;*/
      background: #333;
      color: #FFF !important;
      font-size: 14px;
      padding: 7px 10px;
      border-radius: 4px;
      border: none;
      transition: background 0.3s ease-out;

      position: relative;
      bottom: 80px;
      left: 50%;
      margin-left: -50px;
      margin-top: 0;
      outline: 0;
      &:hover {
        background: #50C0FB;
      }
      &:active {
        margin-top: 2px;
      }
    }

    #container.active .box,
    #container.active .box:after,
    #container.active .box-back:after {
      -webkit-animation: front 650ms 0s 1 linear forwards;
      -moz-animation:    front 650ms 0s 1 linear forwards;
      -o-animation:      front 650ms 0s 1 linear forwards;
      animation:         front 650ms 0s 1 linear forwards;
    }

    #container.active .box-back {

      -webkit-animation: back 650ms 0s 1 linear forwards;
      -moz-animation:    back 650ms 0s 1 linear forwards;
      -o-animation:      back 650ms 0s 1 linear forwards;
      animation:         back 650ms 0s 1 linear forwards;
    }

    #container.active .box:after,
    #container.active .box-back:after {
      -webkit-animation-name: shadow;
      -moz-animation-name:    shadow;
      -o-animation-name:      shadow;
      animation-name:         shadow;
    }

    #container.active .box,
    #container.active .box-back,
    #container.active .box:after,
    #container.active .box-back:after {
      -webkit-animation-play-state: running;
      -moz-animation-play-state:    running;
      -o-animation-play-state:      running;
      animation-play-state:         running;
    }

    #container.reverse .box {

      -webkit-transform: scale(1) rotateY(180deg);
      -moz-transform: scale(1) rotateY(180deg);
      -ms-transform: scale(1) rotateY(180deg);
      -o-transform: scale(1) rotateY(180deg);
      transform: scale(1) rotateY(180deg);

      -webkit-animation-direction: reverse;
      -moz-animation-direction:    reverse;
      -o-animation-direction:      reverse;
      animation-direction:         reverse;
    }

    #container.reverse .box-back {

      -webkit-transform: scale(1) rotateY(360deg);
      -moz-transform: scale(1) rotateY(360deg);
      -ms-transform: scale(1) rotateY(360deg);
      -o-transform: scale(1) rotateY(360deg);
      transform: scale(1) rotateY(360deg);

      -webkit-animation-direction: reverse;
      -moz-animation-direction:    reverse;
      -o-animation-direction:      reverse;
      animation-direction:         reverse;
    }

/* Animations */
@-webkit-keyframes back {
  0% {
    -webkit-transform:
    scale(1)
    rotateY(180deg);
  }

  10% {
    -webkit-transform:
    scale(1.000768)
    rotateY(180deg);
  }

  20% {
    -webkit-transform:
    scale(1.024576)
    rotateY(180deg);
  }

  30% {
    -webkit-transform:
    scale(1.125424)
    rotateY(180.17135717260666deg);
  }

  40% {
    -webkit-transform:
    scale(1.149232)
    rotateY(185.48342952341287deg);
  }

  50% {
    -webkit-transform:
    scale(1.15)
    rotateY(221.6397929434164deg);
  }

  60% {
    -webkit-transform:
    scale(1.149232)
    rotateY(318.3602070565836deg);
  }

  70% {
    -webkit-transform:
    scale(1.125424)
    rotateY(354.51657047658716deg);
  }

  80% {
    -webkit-transform:
    scale(1.024576)
    rotateY(359.8286428273933deg);
  }

  90% {
    -webkit-transform:
    scale(1.000768)
    rotateY(360deg);
  }

  100% {
    -webkit-transform:
    scale(1)
    rotateY(360deg);
  }


}

@-moz-keyframes back {
  0% {
    -moz-transform:
    scale(1)
    rotateY(180deg);
  }

  10% {
    -moz-transform:
    scale(1.000768)
    rotateY(180deg);
  }

  20% {
    -moz-transform:
    scale(1.024576)
    rotateY(180deg);
  }

  30% {
    -moz-transform:
    scale(1.125424)
    rotateY(180.17135717260666deg);
  }

  40% {
    -moz-transform:
    scale(1.149232)
    rotateY(185.48342952341287deg);
  }

  50% {
    -moz-transform:
    scale(1.15)
    rotateY(221.6397929434164deg);
  }

  60% {
    -moz-transform:
    scale(1.149232)
    rotateY(318.3602070565836deg);
  }

  70% {
    -moz-transform:
    scale(1.125424)
    rotateY(354.51657047658716deg);
  }

  80% {
    -moz-transform:
    scale(1.024576)
    rotateY(359.8286428273933deg);
  }

  90% {
    -moz-transform:
    scale(1.000768)
    rotateY(360deg);
  }

  100% {
    -moz-transform:
    scale(1)
    rotateY(360deg);
  }


}

@-ms-keyframes back {
  0% {
    -ms-transform:
    scale(1)
    rotateY(180deg);
  }

  10% {
    -ms-transform:
    scale(1.000768)
    rotateY(180deg);
  }

  20% {
    -ms-transform:
    scale(1.024576)
    rotateY(180deg);
  }

  30% {
    -ms-transform:
    scale(1.125424)
    rotateY(180.17135717260666deg);
  }

  40% {
    -ms-transform:
    scale(1.149232)
    rotateY(185.48342952341287deg);
  }

  50% {
    -ms-transform:
    scale(1.15)
    rotateY(221.6397929434164deg);
  }

  60% {
    -ms-transform:
    scale(1.149232)
    rotateY(318.3602070565836deg);
  }

  70% {
    -ms-transform:
    scale(1.125424)
    rotateY(354.51657047658716deg);
  }

  80% {
    -ms-transform:
    scale(1.024576)
    rotateY(359.8286428273933deg);
  }

  90% {
    -ms-transform:
    scale(1.000768)
    rotateY(360deg);
  }

  100% {
    -ms-transform:
    scale(1)
    rotateY(360deg);
  }


}

@-o-keyframes back {
  0% {
    -o-transform:
    scale(1)
    rotateY(180deg);
  }

  10% {
    -o-transform:
    scale(1.000768)
    rotateY(180deg);
  }

  20% {
    -o-transform:
    scale(1.024576)
    rotateY(180deg);
  }

  30% {
    -o-transform:
    scale(1.125424)
    rotateY(180.17135717260666deg);
  }

  40% {
    -o-transform:
    scale(1.149232)
    rotateY(185.48342952341287deg);
  }

  50% {
    -o-transform:
    scale(1.15)
    rotateY(221.6397929434164deg);
  }

  60% {
    -o-transform:
    scale(1.149232)
    rotateY(318.3602070565836deg);
  }

  70% {
    -o-transform:
    scale(1.125424)
    rotateY(354.51657047658716deg);
  }

  80% {
    -o-transform:
    scale(1.024576)
    rotateY(359.8286428273933deg);
  }

  90% {
    -o-transform:
    scale(1.000768)
    rotateY(360deg);
  }

  100% {
    -o-transform:
    scale(1)
    rotateY(360deg);
  }


}

@keyframes back {
  0% {
    transform:
    scale(1)
    rotateY(180deg);
  }

  10% {
    transform:
    scale(1.000768)
    rotateY(180deg);
  }

  20% {
    transform:
    scale(1.024576)
    rotateY(180deg);
  }

  30% {
    transform:
    scale(1.125424)
    rotateY(180.17135717260666deg);
  }

  40% {
    transform:
    scale(1.149232)
    rotateY(185.48342952341287deg);
  }

  50% {
    transform:
    scale(1.15)
    rotateY(221.6397929434164deg);
  }

  60% {
    transform:
    scale(1.149232)
    rotateY(318.3602070565836deg);
  }

  70% {
    transform:
    scale(1.125424)
    rotateY(354.51657047658716deg);
  }

  80% {
    transform:
    scale(1.024576)
    rotateY(359.8286428273933deg);
  }

  90% {
    transform:
    scale(1.000768)
    rotateY(360deg);
  }

  100% {
    transform:
    scale(1)
    rotateY(360deg);
  }


}



@-webkit-keyframes front {
  0% {
    -webkit-transform:
    scale(1)
    rotateY(0deg);
  }

  10% {
    -webkit-transform:
    scale(1.000768)
    rotateY(0deg);
  }

  20% {
    -webkit-transform:
    scale(1.024576)
    rotateY(0deg);
  }

  30% {
    -webkit-transform:
    scale(1.125424)
    rotateY(0.17135717260665195deg);
  }

  40% {
    -webkit-transform:
    scale(1.149232)
    rotateY(5.4834295234128625deg);
  }

  50% {
    -webkit-transform:
    scale(1.15)
    rotateY(41.639792943416424deg);
  }

  60% {
    -webkit-transform:
    scale(1.149232)
    rotateY(138.36020705658356deg);
  }

  70% {
    -webkit-transform:
    scale(1.125424)
    rotateY(174.51657047658713deg);
  }

  80% {
    -webkit-transform:
    scale(1.024576)
    rotateY(179.82864282739334deg);
  }

  90% {
    -webkit-transform:
    scale(1.000768)
    rotateY(180deg);
  }

  100% {
    -webkit-transform:
    scale(1)
    rotateY(180deg);
  }


}

@-moz-keyframes front {
  0% {
    -moz-transform:
    scale(1)
    rotateY(0deg);
  }

  10% {
    -moz-transform:
    scale(1.000768)
    rotateY(0deg);
  }

  20% {
    -moz-transform:
    scale(1.024576)
    rotateY(0deg);
  }

  30% {
    -moz-transform:
    scale(1.125424)
    rotateY(0.17135717260665195deg);
  }

  40% {
    -moz-transform:
    scale(1.149232)
    rotateY(5.4834295234128625deg);
  }

  50% {
    -moz-transform:
    scale(1.15)
    rotateY(41.639792943416424deg);
  }

  60% {
    -moz-transform:
    scale(1.149232)
    rotateY(138.36020705658356deg);
  }

  70% {
    -moz-transform:
    scale(1.125424)
    rotateY(174.51657047658713deg);
  }

  80% {
    -moz-transform:
    scale(1.024576)
    rotateY(179.82864282739334deg);
  }

  90% {
    -moz-transform:
    scale(1.000768)
    rotateY(180deg);
  }

  100% {
    -moz-transform:
    scale(1)
    rotateY(180deg);
  }


}

@-ms-keyframes front {
  0% {
    -ms-transform:
    scale(1)
    rotateY(0deg);
  }

  10% {
    -ms-transform:
    scale(1.000768)
    rotateY(0deg);
  }

  20% {
    -ms-transform:
    scale(1.024576)
    rotateY(0deg);
  }

  30% {
    -ms-transform:
    scale(1.125424)
    rotateY(0.17135717260665195deg);
  }

  40% {
    -ms-transform:
    scale(1.149232)
    rotateY(5.4834295234128625deg);
  }

  50% {
    -ms-transform:
    scale(1.15)
    rotateY(41.639792943416424deg);
  }

  60% {
    -ms-transform:
    scale(1.149232)
    rotateY(138.36020705658356deg);
  }

  70% {
    -ms-transform:
    scale(1.125424)
    rotateY(174.51657047658713deg);
  }

  80% {
    -ms-transform:
    scale(1.024576)
    rotateY(179.82864282739334deg);
  }

  90% {
    -ms-transform:
    scale(1.000768)
    rotateY(180deg);
  }

  100% {
    -ms-transform:
    scale(1)
    rotateY(180deg);
  }


}

@-o-keyframes front {
  0% {
    -o-transform:
    scale(1)
    rotateY(0deg);
  }

  10% {
    -o-transform:
    scale(1.000768)
    rotateY(0deg);
  }

  20% {
    -o-transform:
    scale(1.024576)
    rotateY(0deg);
  }

  30% {
    -o-transform:
    scale(1.125424)
    rotateY(0.17135717260665195deg);
  }

  40% {
    -o-transform:
    scale(1.149232)
    rotateY(5.4834295234128625deg);
  }

  50% {
    -o-transform:
    scale(1.15)
    rotateY(41.639792943416424deg);
  }

  60% {
    -o-transform:
    scale(1.149232)
    rotateY(138.36020705658356deg);
  }

  70% {
    -o-transform:
    scale(1.125424)
    rotateY(174.51657047658713deg);
  }

  80% {
    -o-transform:
    scale(1.024576)
    rotateY(179.82864282739334deg);
  }

  90% {
    -o-transform:
    scale(1.000768)
    rotateY(180deg);
  }

  100% {
    -o-transform:
    scale(1)
    rotateY(180deg);
  }


}

@keyframes front {
  0% {
    transform:
    scale(1)
    rotateY(0deg);
  }

  10% {
    transform:
    scale(1.000768)
    rotateY(0deg);
  }

  20% {
    transform:
    scale(1.024576)
    rotateY(0deg);
  }

  30% {
    transform:
    scale(1.125424)
    rotateY(0.17135717260665195deg);
  }

  40% {
    transform:
    scale(1.149232)
    rotateY(5.4834295234128625deg);
  }

  50% {
    transform:
    scale(1.15)
    rotateY(41.639792943416424deg);
  }

  60% {
    transform:
    scale(1.149232)
    rotateY(138.36020705658356deg);
  }

  70% {
    transform:
    scale(1.125424)
    rotateY(174.51657047658713deg);
  }

  80% {
    transform:
    scale(1.024576)
    rotateY(179.82864282739334deg);
  }

  90% {
    transform:
    scale(1.000768)
    rotateY(180deg);
  }

  100% {
    transform:
    scale(1)
    rotateY(180deg);
  }


}
View Compiled
// shim layer with setTimeout fallback
    // always got hugz for Paul Irish
    window.requestAnimFrame = (function(){
      return  window.requestAnimationFrame       ||
              window.webkitRequestAnimationFrame ||
              window.mozRequestAnimationFrame    ||
              function( callback ){
                window.setTimeout(callback, 1000 / 60);
              };
    })();

    var goButton = document.getElementById("animate");
    var container = document.getElementById("container");
    var animating = false;

    goButton.addEventListener('click', function() {

      if (animating)
        return;

      container.classList.add('active');
      animating = true;

      setTimeout(function() {
        requestAnimFrame(function() {
          animating = false;
          container.classList.remove('active');
          container.classList.toggle('reverse');
        });
      }, 680);
    });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.