CSS 2d Flip using jquery

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
	<div class="panel" >	
		<div class="front" style="background:white;">
			<div class="pad">
				<button id="flipstart">Start</button>
			</div>
		</div>		
		<div class="back"style="background:white;">
			<div class="pad">
				<button id="closeButton">XX</button>
			</div>
		</div>		
	</div>

CSS

.panel {
			margin: 0 auto;
			width: 300px;
			height: 130px;	
			position: relative;
		}
		.panel .front {
			position: absolute;
			top: 0;
			z-index: 900;
			width: inherit;
			height: inherit;
			text-align: center;
			-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;
			-webkit-transform: rotateY(180deg);
			-moz-transform: rotateY(180deg);
		}
		.panel .back {
			position: absolute;
			top: 0;
			z-index: 800;
			width: inherit;
			height: inherit;
			-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;
		}
		.panel.flip .back {
			z-index: 1000;
			-webkit-transform: rotateX(0deg) rotateY(0deg);
			-moz-transform: rotateX(0deg) rotateY(0deg);
		}
    p{
      color:#000;
    }

JavaScript

$('#flipstart').click(function(){
					$('.panel').addClass('flip');
				});
				
				$('#closeButton').click(function(){
					$('.panel').removeClass('flip');
				});