CSS card Flip

by amindunited

HTML

<div class="container">
    <div class="face front">
        <div class="icon-back control"></div>
        Front
    </div>
    <div class="face back">
        <div class="icon-back control"></div>
        Back
    </div>
</div>
<div class="explain">
    <h3>Click on the <span class="icon-back"></span>, or the "Flip" button below to see the other side of the card</h3>
<button class="flip">Flip</button>
</div>

CSS

@import url(http://weloveiconfonts.com/api/?family=entypo);

.container, .front, .back {
    width:100px;
    height: 200px;
}
.container {
    position: relative;
    -webkit-transform-style: preserve-3d;
  -webkit-transition: 1s;
    //-webkit-transform: rotatey(180deg);
}
.explain {
    margin-top: 20px;
}
button.flip {
    //position: absolute;
    //top: 100px;
    //left: 300px;
    width: 100px;
}


.face {
    width: 100%;
    height: 100%;
    position: absolute;
    top:20px;
    left:20px;
      -webkit-backface-visibility: hidden;
      -moz-backface-visibility: hidden;
      -ms-backface-visibility: hidden;
      -o-backface-visibility: hidden;
      backface-visibility: hidden;
    z-index: 2;
    font-family: Georgia;
    font-size: 2em;
    text-align: center;
    line-height: 200px;
}
.front {
    background-color: #0e0e0e;
    color: #ededed;
}
.back {
    background-color: #cdcdcd;
    -webkit-transform: rotateY(180deg);
      -moz-transform: rotateY(180deg);
      -ms-transform: rotateY(180deg);
      -o-transform: rotateY(180deg);
      transform: rotateY(180deg);
}

.control {
    position: absolute;
    top: 2px;
    right:2px;
    width: 16px;
    height: 16px;
    color: #ededed;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, .5);
    font-size: 12px;
    content:"\1F519";
    line-height: 18px;
    cursor:pointer;
}
.control:hover {
    color: #5bdb4a;
}
[class*="icon"] {
  font-family: 'entypo';
}



.container.active .front,
.container.active .front:after,
.container.active .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;
    /*
    To animate the flip from the right edge (instead of center)
    transform-origin: right center;
    -webkit-transform-origin: right center;
    */
}

.container.active .back {
    
    -webkit-animation: back 650ms 0s 1...

JavaScript

// 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 animating = false;

$(function(){
    $('button.flip, .control').on('click', function(){
        if (animating) {
            return;
        }
        $('.container').addClass('active');
        animating = true;
        
        setTimeout(function() {
            requestAnimFrame(function() {
                animating = false;
                $('.container').removeClass('active');
                $('.container').toggleClass('reverse');
            });
        }, 680);
    });
});