flip card back/front

flip.css

.card .front, .card .back {
    float: none;
    position: absolute;
    top: 0;
    left: 0;
    width: inherit;
    height: inherit;
    border: 1px solid #dddddd;
    padding: 1px;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
    -webkit-transition-duration: 0.5s, 0.2s;
    -moz-transition-duration: 0.5s, 0.2s;
    -ms-transition-duration: 0.5s, 0.2s;
    -o-transition-duration: 0.5s, 0.2s;
    transition-duration: 0.5s, 0.2s;
    -webkit-transition-property: -webkit-transform, box-shadow;
    -moz-transition-property: -moz-transform, box-shadow;
    -ms-transition-property: -ms-transform, box-shadow;
    -o-transition-property: -o-transform, box-shadow;
    transition-property: transform box-shadow; 
}
  
.card .front {
    z-index: 900;
    background: #fff;
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg); 
}
    
.card .front a {
    visibility: hidden; 
}
  
.card.flip .front {
    z-index: 900;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg); 
}
  
.card .back {
    z-index: 800;
    border-color: #cccccc;
    background: #ee0011;
    border-color: #d4000f;
    color: #fff;
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    transform: rotateY(-180deg); 
}

.card .back a {
    background-position: 0 2px;
    color: rgba(255, 255, 255, 0.75); 
}

.card .back a:hover {
    color: white;
    background-position: 0 -18px; 
}

.card.flip .back {
    z-index: 1000;
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
    -webkit-box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.5); 
}

.card .front:hover {
    border-color: #cccccc;
    -webkit-box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.3); 
}

.card .front:hover a {
  visibility: visible; 
 }

.card .flip_back, .card .flip_front {
    visibility: hidden;
    position: absolute;
    top: 5px;
    right: 5px;
    width: 20px;
    height: 20px; 
}

.card .flip_front {
    background: transparent url("../images/flip_icon.png") 0 0 no-repeat; 
}

.card .flip_back {
    background: transparent url("../images/flip_icon.png") 0 -30px no-repeat; 
}

.card:hover {
    z-index: 1000; 
}

.card:hover .flip_back, .card:hover .flip_front {
  visibility: visible; 
}
      

flip.htm

<div class="card data">
  <div class="front">
...
  </div>
  <div class="back">
...
  </div>
</div>

flip.js

  $('.card .front').append('<span class="flip_back"></span>');
	$('.card .back').append('<span class="flip_front"></span>');

	$('.card').click(function (e) {
	    if ($(this).hasClass('flip')) {
	        if (e.target.tagName == "A") {
	            window.open(e.target.href);
	            e.preventDefault();
	        } else {
	            $(this).removeClass('flip');
	        }
	    } else {
	        if (e.target.tagName == "A") {
	            window.open(e.target.href);
	            e.preventDefault();
	        } else {
	            $(this).addClass('flip');
	        }
	    }
	});