jQuery Flip panels

by freedawirl

HTML

<div class="card panel">
	<div class="front">
		<h3>This is not clickable</h3> This is not clickable 
		<p>
			<a class="action-front" href="">This is clickable</a> 
		</p>
	</div>
	<div class="back" id="card">
		<div class="pad">
			<a class="action-back" href="">click this and we will flip back</a> 
			<p>
				This is not clickable
			</p>
		</div>
	</div>
</div>
<div class="card panel">
	<div class="front">
		<h3>This is not clickable</h3> This is not clickable 
		<p>
			<a class="action-front" href="">This is clickable</a> 
		</p>
	</div>
	<div class="back" id="card">
		<div class="pad">
			<a class="action-back" href="">click this and we will flip back</a> 
			<p>
				This is not clickable
			</p>
		</div>
	</div>
</div>

CSS

.panel {
			float: left;
			width: 200px;
			height: 200px;
			margin: 20px;
			position: relative;
			font-size: .8em;
			
			-webkit-perspective: 600px;
			-moz-perspective: 600px;
		}

		.panel .front {
			float: none;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 900;
			width: inherit;
			height: inherit;
			border: 1px solid #ccc;
			background: #fff;
			text-align: center;

			-moz-box-shadow: 0 1px 5px rgba(0,0,0,0.9);
			-webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.9);
			box-shadow: 0 1px 5px rgba(0,0,0,0.9);

			-webkit-transform: rotateX(0deg) rotateY(0deg);
			-webkit-transform-style: preserve-3d;
			-webkit-backface-visibility: hidden;

			-moz-transform: rotateX(0deg) rotateY(0deg);
			-moz-transform-style: preserve-3d;
			-moz-backface-visibility: hidden;

			/* -- transition is the magic sauce for animation -- */
			-o-transition: all .4s ease-in-out;
			-ms-transition: all .4s ease-in-out;
			-moz-transition: all .4s ease-in-out;
			-webkit-transition: all .4s ease-in-out;
			transition: all .4s ease-in-out;
		}
		.panel.flip .front {
			z-index: 900;
			border-color: #eee;
			background: #fff;

			-webkit-transform: rotateY(180deg);
			-moz-transform: rotateY(180deg);
			
			-moz-box-shadow: 0 15px 50px rgba(0,0,0,0.2);
			-webkit-box-shadow: 0 15px 50px rgba(0,0,0,0.2);
			box-shadow: 0 15px 50px rgba(0,0,0,0.2);
		}
		
		.panel .back {
			float: none;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 800;
			width: inherit;
			height: inherit;
			border: 1px solid #ccc;
			background: #fff;
			text-shadow: 1px  1px 1px rgba(0,0,0,0.6); 
			
			-webkit-transform: rotateY(-180deg);
			-webkit-transform-style: preserve-3d;
			-webkit-backface-visibility: hidden;

			-moz-transform: rotateY(-180deg);
			-moz-transform-style: preserve-3d;
			-moz-backface-visibility: hidden;

			/* -- transition is the magic sauce for animation -- */
			-o-transition: all .4s ease-in-out;
			-ms-transition: all .4s...

JavaScript

$(document).ready(function(){
			$('.card .action-front').click(function(e){
				$(this).closest('.card').addClass('flip');
				e.preventDefault();
			});
			$('.card .action-back').click(function(e){
				$(this).closest('.card').removeClass('flip');
				e.preventDefault();
			});
			
		});