jQuery Flip panels_v01

by freedawirl

HTML

<div class="card panel">
	<div class="front">
  <div class="pad">
			<a class="action-front" href="">flip over</a> 
		</div>
	</div>
	<div class="back" id="card">
		<div class="pad">
			<a class="action-back" href="">flip back</a> 
	
		</div>
	</div>
</div>
<div class="card panel">
	<div class="front">
  <div class="pad">
			<a class="action-front" href="">flip over</a> 
		</div>
	</div>
	<div class="back" id="card">
		<div class="pad">
			<a class="action-back" href="">flip back</a> 
		</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;
		

			-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;
      
      -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.flip .front {
			z-index: 900;
			border-color: #eee;
			background: #fff;

			-webkit-transform: rotateY(180deg);
			-moz-transform: rotateY(180deg);
	
		}
		.panel .back {
			float: none;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 800;
			width: inherit;
			height: inherit;
			border: 1px solid #ccc;
			background: #fff;
		
			
			-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 ease-in-out;
			-moz-transition: all .4s ease-in-out;
			-webkit-transition: all .4s ease-in-out;
			transition: all .4s ease-in-out;
      
      -moz-box-shadow: 0 15px 50px rgba(0,0,0,0.2);
			-webkit-box-shadow: 0 15px 50px...

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();
			});
			
		});